Question

I would like to have a background image, from a URL (So I can t edit its opacity manually)
with an low opacity and write content on top of it:
but the content should be with the normal 1 opacity

http://jsfiddle.net/ca111111/BAJN5/" rel="no follow" >http://jsfidle.net/ca111111/BAJN5/

编辑:"http://jsfiddle.net/ca1111111/BAJN5/1/" rel="nofollow">http://jsfiddle.net/ca111111/BAJN5/1/ 略好一点

Answer 1

不透明 属性是继承的。如果您为元素设定了 不透明 & lt; 1, 它的所有子元素也将具有 & lt; 1 值, 用于 不透明和您不能更改此 < / em > 。



实现您想要的目标的最简单方式是使用 < em> 多重背景 < / em > 并在您的图像上方有一个半透明背景。 当然, 这引起了一些浏览器兼容性问题( 参见 < a href=" "http:// caniuse.com/ #feat= multibackrounds" rel= “ nofollow” > 多重背景支持 < /a > 和 < a href=" http://caniuse.com/ #feat=cs-gratients" rel="nofollow" > >gratient支持 < /a > 。

示例如下:http://dabblet.com/gist/2818293(应在IE10、Opera 11+和其他桌面浏览器的非迪诺萨文版中工作)

还有一种选择,即不将背景设置在父母身上,而将背景设置在没有自己子女(或假元素上)的儿童身上,即 绝对定位 ,并拥有比父(有 z-index 背景)更远的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

我看到我通过伪元素做成的: 在 & amp; 之前: 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://jsfidle.net/8LFLLd/68/" rel=“nofollow”>http://jsfidle.net/8LFLD/68//a>

Answer 4

< a href=" "http://nicolasgallaglaghher.com/css-backforld-image-hacks/" rel="nofollow" >此页显示一种技术,用一个 psuedo 元素模拟背景图像不透明性

Answer 5

嘿,我想你应该想要这个

定义您的主 Div rgba 属性

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

更多信息 < a href=""http://css-tricks.com/rgba-browser-support/" rel="norfollow" >http://cs-tricks.com/rgba-browser-support/

友情链接