我可以只设置div的背景图片的不透明度吗？ [英] Can I set an opacity only to the background image of a div?

问题描述

假设我有

 < div class =myDiv>您好：< / div> 
  

我要放置背景图片 0.5 - 但我想让我写的文本将有完全不透明度（1）。

如果我写这样的css

  .myDiv { opacity：0.5} 
  

一切

所以 - 我的问题是 - 如何获得具有完全不透明文本的低不透明度背景图片？

opacity 影响整个元素包括它的内容，没有办法改变这个方法。行为。

次要div

添加另一个 div 元素到容器以保存背景。这是最适合跨浏览器的方法，即使在IE6也能正常工作。

HTML

 < div class =myDiv> 
< div class =bg>< / div> 
您好，有
< / div> 
  

CSS

< pre class =lang-css prettyprint-override> .myDiv {
position：relative;
z-index：1;
}

.myDiv .bg {
position：absolute;
z-index：-1;
top：0;
bottom：0;
left：0;
right：0;
background：url（test.jpg）center center;
opacity：.4;
width：100％;
height：100％;
}


请参阅测试用例在jsFiddle上

：before和:: before伪元素

另一个窍门是使用CSS 2.1 ：before 或CSS 3 :: before 伪元素。 ：before 在从版本8的IE支持伪元素，而不支持 :: before 伪元素在所有。

HTML

 < div class =myDiv> 
您好，有
< / div> 
  

CSS

< pre class =lang-css prettyprint-override> .myDiv {
position：relative;
z-index：1;
}

.myDiv：before {
content：;
position：absolute;
z-index：-1;
top：0;
bottom：0;
left：0;
right：0;
background：url（test.jpg）center center;
opacity：.4;
}


其他注意事项

由于 z-index 的行为，您将必须为容器设置z-index以及负值<$​​ c $ c> z-index <

测试用例

请参阅jsFiddle测试用例：

• 使用CSS 2.1：之前
• 
  
• 使用CSS 3 :: before

Let's say I have

<div class="myDiv"> Hi there </div>

I want to put a background-image and give it an opacity of 0.5 - but I want that the text I have written will have full opacity (1).

If I would write the css like this

.myDiv { opacity:0.5 }

everything will be in low opacity - and I don't want that.

So - my question is - How can I get low-opacity background image with full opacity text?

解决方案

Nope, this cannot be done since opacity affects the whole element including its content and there's no way to alter this behavior. You can work around this with the two following methods.

Secondary div

Add another div element to the container to hold the background. This is the most cross-browser friendly method and will work even on IE6.

HTML

<div class="myDiv">
    <div class="bg"></div>
    Hi there
</div>

CSS

.myDiv {
    position: relative;
    z-index: 1;
}

.myDiv .bg {
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: url(test.jpg) center center;
    opacity: .4;
    width: 100%;
    height: 100%;
}

See test case on jsFiddle

:before and ::before pseudo-element

Another trick is to use the CSS 2.1 :before or CSS 3 ::before pseudo-elements. :before pseudo-element is supported in IE from version 8, while the ::before pseudo-element is not supported at all. This will hopefully be rectified in version 10.

HTML

<div class="myDiv">
    Hi there
</div>

CSS

.myDiv {
    position: relative;
    z-index: 1;
}

.myDiv:before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: url(test.jpg) center center;
    opacity: .4;
}

Additional notes

Due to the behavior of z-index you will have to set a z-index for the container as well as a negative z-index for the background image.

Test cases

See test case on jsFiddle:

• Using CSS 2.1 :before
• Using CSS 3 ::before

这篇关于我可以只设置div的背景图片的不透明度吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！