设置页面背景图片不透明度答案

【问题标题】：Set page background image opacity设置页面背景图片不透明度
【发布时间】：2014-06-26 21:05:14
【问题描述】：

如何将整个页面不透明度的背景图片设置为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 的不透明度？？

【问题讨论】：

你用的是什么浏览器？
@user3739658 火狐 30.0
img01.jpg 是 html 的背景或 HTML 中使用的图像。
这个主题是一样的 - stackoverflow.com/questions/4183948/…
stackoverflow.com/questions/806000/…的可能重复

标签： html css opacity

【解决方案1】：

在不改变图像的情况下，我会这样做。

使用伪元素定位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 中查看示例。

【讨论】：

【解决方案2】：

您不能在背景图像上设置不透明度。

相反，您可以：

将背景设为具有所需不透明度级别的半透明 PNG。根据背景的大小，这可能不是一个很好的解决方案，因为 PNG 的文件大小比 JPG 大得多。
如果透明度旨在超过纯色（即白色或黑色），您可以使用 rgba() 颜色在 background-image 顶部添加纯色/纯色背景渐变以模拟所需的不透明度（例如，如果您想要背景图像有 60% 的不透明度，添加一个 40% 不透明度的黑色平面背景渐变，这实际上不是顶部的渐变）。
将您的 background-image 添加到像 ::after 这样的伪元素中，该元素绝对定位为填充包含元素并操纵此仅图像“假背景”层的 opacity。

【讨论】：

【解决方案3】：

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

【讨论】：