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

【问题标题】：Is there a way with CSS3 to specify background image translucency?CSS3有没有办法指定背景图像半透明？
【发布时间】：2011-07-09 11:05:44
【问题描述】：

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

【问题讨论】：

【解决方案1】：

只需在顶部放置一个相同大小的容器，并用你的百分比 rgba 白色填充背景色。

即。

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

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

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

【讨论】：

由于rgba() 中的第四个参数定义了不透明度，因此您可能想要定义background-color: rgb(...) 样式上方的行，因此它将适用于旧版浏览器 - css-tricks.com/2151-rgba-browser-support。

【解决方案2】：

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

opacity: 0.5;

然后将包含您的内容的 sibling div 放在它上面。

【讨论】：

【解决方案3】：

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

这个元素的任何子元素都会继承它的不透明度，如果这是一个问题，请按照 JD Parsons 所说的去做。 filter 属性适用于 IE。 [从 CSS3 视觉快速入门指南修改的示例]

【讨论】：