1

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

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

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

4

5 回答 5

2

opacity财产是继承的。如果您opacity为一个元素设置 < 1，则其所有子元素也将具有该 < 1 值，opacity并且您无法更改 this。

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

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

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

于 2012-05-28T09:53:43.857 回答
1

你的意思是这样的？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>
于 2012-05-28T10:06:31.687 回答
1

看到我通过伪元素制作：之前和：之后

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/

于 2012-05-28T10:12:25.617 回答
0

此页面显示了一种使用伪元素模拟背景图像不透明度的技术

于 2012-05-28T09:49:39.373 回答
0

嘿，我想你应该想要这个

定义您的 Main Div rgba属性

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

更多信息http://css-tricks.com/rgba-browser-support/

于 2012-05-28T09:53:31.163 回答