背景图像不透明度与父背景颜色

CSS: set background image with opacity?的答案使用伪元素:after描述了很好的背景不透明度修复。但是，如果父分部具有背景颜色，则透明背景图像不再显示，因为它使用了z-index: -1。我已经尝试了使用这个基本模型的无数解决方法，但无济于事。背景图像不透明度与父背景颜色

以下是示例代码。请注意，没有.locations_30 {background:white}它很好。

body { 
 
    background-color: #fefbed; 
 
    color: #444; 
 
    font-family: Helvetica, sans-serif; 
 
    font-size: 16px; 
 
} 
 

 
.locations_20 { 
 
    position: relative; 
 
} 
 

 
.locations_20:after { 
 
    content: ""; 
 
    width: 100%; 
 
    height: 100%; 
 
    display: block; 
 
    position: absolute; 
 
    z-index: -1; 
 
    background-image: url(../background_images/zenrockgarden_mod.jpg); 
 
    background-repeat: no-repeat; 
 
    left: 0%; 
 
    top: 0%; 
 
    background-size: 100% 100%; 
 
    opacity: 0.27; 
 
} 
 

 
.locations_30 { 
 
    background: white; 
 
    width: 800px; 
 
    padding: 75px; 
 
} /*parent division with color will overrun z-index: -1*/

<body> 
 
    <div class="locations_40"> 
 
    <div class="locations_30"> 
 
     <p class="locations_20"> 
 
     Super Sale Event We are happy to offer the following: etc,,, <br> We are happy to offer the following: etc,,, <br> We are happy to offer the following: etc,,, <br> We are happy to offer the following: etc,,, <br> We are happy to offer the following: 
 
     etc,,, <br> We are happy to offer the following: etc,,, <br> 
 
     </p> 
 
    </div> 
 
    </div> 
 
</body>

来源

2017-08-25 brianH

如果您更新.locations_20规则，这样它会工作

.locations_20 { 
    position: relative; 
    z-index: 0;     /* added */ 
}

栈片断

注意，由于图像并不在所以这里加载，我加了red到.location_20的背景所以我们可以看到它的工作原理

body { 
 
    background-color: #fefbed; 
 
    color: #444; 
 
    font-family: Helvetica, sans-serif; 
 
    font-size: 16px; 
 
} 
 

 
.locations_20 { 
 
    position: relative; 
 
    z-index: 0;     /* added */ 
 
} 
 

 
.locations_20:after { 
 
    content: ""; 
 
    width: 100%; 
 
    height: 100%; 
 
    display: block; 
 
    position: absolute; 
 
    z-index: -1; 
 
    background-image: url(../background_images/zenrockgarden_mod.jpg); 
 
    background-repeat: no-repeat; 
 
    left: 0%; 
 
    top: 0%; 
 
    background-size: 100% 100%; 
 
    opacity: 0.27; 
 
    background-color: red;   /* temp. added so we can see it */ 
 
} 
 

 
.locations_30 { 
 
    background: white; 
 
    width: 800px; 
 
    padding: 75px; 
 
}

<body> 
 
    <div class="locations_40"> 
 
    <div class="locations_30"> 
 
     <p class="locations_20"> 
 
     Super Sale Event We are happy to offer the following: etc,,, <br> We are happy to offer the following: etc,,, <br> We are happy to offer the following: etc,,, <br> We are happy to offer the following: etc,,, <br> We are happy to offer the following: 
 
     etc,,, <br> We are happy to offer the following: etc,,, <br> 
 
     </p> 
 
    </div> 
 
    </div> 
 
</body>

来源

2017-08-26 09:46:51 LGSon

背景图像不透明度与父背景颜色

回答

相关问题