我可以仅将不透明度设置为div的背景图像吗？

Question

我可以仅将不透明度设置为div的背景图像吗？让我说我有<div class="myDiv">Hi there</div>我想提出一个background-image并给它一个opacity的0.5-但我想，我写的文字将有充分的不透明度（1）。如果我像这样写CSS.myDiv { opacity:0.5 }一切都将是低透明度 - 我不希望这样。所以我的问题是 - 如何获得具有完全不透明度文本的低不透明度背景图像？

Answer 1

不，这不能做，因为opacity影响整个元素，包括其内容，并没有办法改变这种行为。您可以使用以下两种方法解决此问题。

次要div

div向容器添加另一个元素以保存背景。这是最友好的跨浏览器方法，甚至可以在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上的测试用例

：before和::之前的伪元素

另一个技巧是使用CSS 2.1 :before或CSS 3 ::before伪元素。:beforeIE版本8支持伪元素，而::before根本不支持伪元素。这有望在第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-index以及为z-index背景图像设置负数。

测试用例

请参阅jsFiddle上的测试用例：

• 使用CSS 2.1：之前

• 使用CSS 3 ::之前

Answer 2

所以这是另一种方式：

background-image: linear-gradient(rgba(255,255,255,0.5), rgba(255,255,255,0.5)), url("your_image.png");

Answer 3

CSS

div { 
    width: 200px;
    height: 200px;
    display: block;
    position: relative;}div::after {
    content: "";
    background: url(image.jpg); 
    opacity: 0.5;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    z-index: -1;}

HTML

<div> put your div content</div>