CSS:半透明背景和图像

Question

body {
  background-image: url('cloud.png');
  background-color: rgba(255, 255, 255, 0.6);
}

我尝试使用上面的方法在背景图像上方生成半透明的白色背景.它不起作用,只显示背景图像,背景颜色似乎被忽略.如何调整身体背景图像的不透明度？

Answer 1

您可以使用css"before"伪类来创建白色叠加层并放置在DOM中的所有内容之前.添加z-index:-1以确保它不会位于其他元素之上:

body {
    background: url("image.jpg");
}
body:before {
    content: "";
    display: block;
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: -1;
    background-color: rgba(255, 255, 255, 0.6);
}

的jsfiddle

Answer 2

background-color放置在 的下面background-image，而不是上面（在网络浏览器中呈现时）。要将半透明白色块放在图像上，您需要在其顶部放置另一个不同的 HTML 元素，并使用background-color.