Question

如何将整页不透明度的背景图像设置为0.4？

我试过

html { 
  background: url(img01.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;

   opacity: 0.4;
   filter: alpha(opacity=40); /* For IE8 and earlier */
}

但它设置了页面不透明度的所有元素，我只想要img01.jpg的不透明度

Answer 1

您无法在背景图片上设置不透明度。

相反，你可以：

使背景成为具有所需不透明度的半透明PNG。根据背景的大小，这可能不是一个很好的解决方案，因为PNG的文件大小比JPG大得多。
如果透明度要在纯色（即白色或黑色）上，您可以使用background-image颜色在rgba()上添加实心/平面背景渐变，以模仿所需的不透明度（例如，如果您希望背景图像具有60％的不透明度，请添加40％不透明度的黑色平面背景渐变，而不是顶部的渐变）。
将您的background-image添加到像::after这样绝对定位的psuedo元素，以填充包含元素并操纵此图像的opacity＆＃34;假背景＆＃ 34;层。

Answer 2

不改变图像，这就是我的方式。

使用位于fixed或absolute的伪元素：

html:after {
    content : "";
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    background-image: url(http://dummyimage.com/1000x1000/000/fff.png); 
    width: 100%;
    height: 100%;
    opacity : 0.2;
    z-index: -1;
}

您可以在样本中看到此jsfiddle。

Answer 3

当您在父类中使用不透明度时，它也适用于父类和子类。所以你使用rgba颜色代码代替图像。

设置页面背景图像不透明度

3 个答案: