Question

我想从网址中获取背景图片（因此我无法手动编辑其不透明度）
具有低不透明度并在其上面写入内容：
但内容应该是正常的1不透明度

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

编辑：http://jsfiddle.net/ca11111/BAJN5/1/略胜一筹

Answer 1

继承opacity属性。如果设置opacity＆lt; 1对于一个元素，它的所有子元素也将具有＆lt; opacity和的1个值，您无法更改此。

实现目标的最简单方法是使用多个背景，并在图像上方设置半透明背景。当然，这会引发一些浏览器兼容性问题（请参阅multiple backgrounds support和gradient support）。

示例：http://dabblet.com/gist/2818293（适用于IE10，Opera 11+和其他桌面浏览器的非恐龙版本）

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

Answer 2

你的意思是这样的？ 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>

Answer 3

看我通过伪元素做过：之前和之后：之后

<强> 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/

Answer 4

This page显示了使用伪元素

模拟背景图像不透明度的技术

Answer 5

嘿，我认为你应该想要这个

定义主分区 rgba 属性

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

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

Css背景图像与不透明度0.5

5 个答案: