不透明度为 0.5 的 CSS 背景图像答案

【问题标题】：Css background image with opacity 0.5不透明度为 0.5 的 CSS 背景图像
【发布时间】：2012-06-02 16:40:39
【问题描述】：

我想要一个来自 URL 的背景图片（所以我不能手动编辑它的不透明度）
具有低不透明度并在其上写入内容：
但内容应该是正常的 1 不透明度

http://jsfiddle.net/ca11111/BAJN5/

编辑：http://jsfiddle.net/ca11111/BAJN5/1/ 稍微好一点

【问题讨论】：

标签： css background-image opacity

【解决方案1】：

看到我已经通过伪元素 :before & :after

HTML

<div class="addFav">
 <div>asdfasfasfafs</div>
</div>

CSS

.addFav:before {
    background:url(http://lorempixel.com/400/200/sports) no-repeat;
    border:1px solid red;
    height:200px;
    width:400px;
    color:#000;
    padding:15px;
    position:absolute;
    content:"";
    opacity:0.1;    
}


.addFav {
    height:200px;
    width:400px;
    color:red;
    padding:15px;
    position:relative
}

查看演示：- http://jsfiddle.net/8LFLd/66/

这里更新了演示http://jsfiddle.net/8LFLd/68/

【讨论】：

【解决方案2】：

opacity 属性被继承。如果您为一个元素设置了opacity opacity 设置该您无法更改此值。

实现您想要的最简单的方法是使用多个背景并在您的图像顶部添加一个半透明背景。当然，这会引发一些浏览器兼容性问题（参见multiple backgrounds support 和gradient support）。

此处的示例：http://dabblet.com/gist/2818293（应该在 IE10、Opera 11+ 和其他桌面浏览器的所有非恐龙版本中工作）

也可以选择不在父元素上设置背景，而是在没有自己子元素的子元素（或伪元素）上设置背景，即绝对定位并具有z-index rgba 背景）。

【讨论】：

是我的浏览器还是图片仍然不透明度为 1 ----->确实，在 Chrome 上不起作用，但在 Firefox 上起作用
见dabblet.com/gist/2819423，不透明度为0你不应该看到图像，但在Chrome上它可以（Ubuntu下的Chrome）
使用rgba(255,255,255,0)，您应该可以看到图像的原样。列出的第一个背景是应用在顶部的背景。 rgba(255,255,255,0) 表示完全透明。因此，如果顶部的背景是完全透明的，您应该会看到下面的原样；好像上面没有其他背景一样。
是的，我减少而不是增加它，因为它是图像顶部的蒙版

【解决方案3】：

你的意思是这样的？ http://jsfiddle.net/BAJN5/2/

尝试这样设置：

<div style="position:relative"> <!-- wrapper div (relative) -->
    <div style="background:url(an-image-url) no-repeat center center; opacity:0.5; height:220px"></div> <!-- half opacity background -->
    <span style="opacity:1; position:absolute; z-index:1"><!-- full opacity (absolute) -->
        some text
        ......
    </span>
</div>

【讨论】：

【解决方案4】：

嘿，我想你应该想要这个

定义你的 Main Div rgba 属性

div {
   background: rgba(200, 54, 54, 0.5);
}

【讨论】：

他有图像背景，而不是纯色背景。

【解决方案5】：

This page 展示了一种使用伪元素模拟背景图像不透明度的技术

【讨论】：