我可以将不透明度设置为仅一个div的背景图像？ [英] Can I set an opacity only to the background image of a div?

问题描述

让我们说我有

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

我想提出一个背景图片，并给它0.5的透明度 - 但我想我写文将完全不透明（1）。

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).

如果我会写这样的CSS

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.

添加其他 DIV 元素的容器，以便容纳的背景。这是最跨浏览器友好的方法，并将于IE6甚至工作。

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%;
}

请参阅测试用例上的jsfiddle

另一个技巧是使用CSS 2.1 ：之前或CSS 3 ::之前伪元素。 ：之前伪元素在IE 8版本所支持，而 ::不支持伪元素之前在所有。希望这将在版本10中得到纠正。

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;
}

补充说明

由于的z-index 的行为，你必须设置一个Z-指数为容器以及负的z-index 的背景图像。

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.

请参阅测试用例上的jsfiddle：

See test case on jsFiddle:

• 使用CSS 2.1：前


• 使用CSS 3 ::之前

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

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