有没有办法用CSS3指定背景图像半透明？

Question

我找到了background-color：rgba（），但这只指定了背景颜色的 alpha。当使用CSS3 background-image（）指定图像时，背景图像是否有类似的东西？如果没有纯CSS3解决方案，那么最优雅的方法是什么？

Answer 1

只需在顶部上放置一个相同尺寸的容器，背景颜色填充百分比为rgba white。

即

html {
    background-image: url(blah.jpg);
}

body {
    background-color: rgba(255,255,255,0.5);
}

请注意，如果您要求背景图像在与其他元素重叠的元素上半透明，则此技术将无效。

Answer 2

你可以添加一个div，其唯一目的是作为背景，并给它一个

opacity: 0.5;

然后有一个兄弟 div，其中包含位于其上的内容。

Answer 3

div.gallery   {
   background-image: url(...........);
   filter :alpha(opacity=0.8);
   opacity : .8;
}

这个元素的任何子元素都会继承它的不透明性，如果这是JD Parsons所说的问题。 filter属性适用于IE。 [从CSS3 Visual Quickstart Guide修改的示例]