内容和背景图像之间的半透明层- CSS
内容和背景图像之间的半透明层- CSS
提问于 2018-06-04 00:08:39
我正在尝试添加一个半透明的层之间的背景图像和索引任何层是如何不显示。我使用了z索引，但没有working.Is这里有什么解决方案吗?或者我需要使绝对定位的背景图像和背景颜色？
如果我使用z-index：-1，它就在all..and后面，如果我使用1，那么i就在所有索引的前面
<div class="bg">
<div class="mask"></div>
<div class="content">
<h2>Hello There</h2>
</div>
</div>和Css代码是
.bg{
background: url('http://support.kaziwood.com/wp-content/uploads/2018/06/member-1.png') no-repeat;
height:200px;
}
.content{padding:70px 130px}
.mask{
background:#000;
position:absolute;
content:'';
width:100%;
height:100%;
left:0;
top:0;
opacity:0.3;
z-index:-1;
}回答 3
Stack Overflow用户
回答已采纳
发布于 2018-06-04 00:14:40
您可以简单地使用linear-gradient作为图像的第二个背景：
.bg {
background:
linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),
url('http://support.kaziwood.com/wp-content/uploads/2018/06/member-1.png') center/cover no-repeat;
height: 200px;
}
.content {
padding: 70px 130px
}<div class="bg">
<div class="content">
<h2>Hello There</h2>
</div>
</div>
Stack Overflow用户
发布于 2018-06-04 00:13:41
您需要将position:relative添加到父div和content div。试试这段CSS代码。
.bg {
background: url('http://support.kaziwood.com/wp-content/uploads/2018/06/member-1.png') no-repeat;
height: 200px;
position: relative;
}
.content {
padding: 70px 130px;
position: relative;
}
.mask {
background: #000;
position: absolute;
content: '';
width: 100%;
height: 100%;
left: 0;
top: 0;
opacity: 0.3;
z-index: 0;
}Stack Overflow用户
发布于 2018-06-04 00:16:27
这可以用更少的元素和使用伪内容的简化结构来实现。
<div>
<h2>Hello, there</h2>
</div>然后是CSS：
/* main container */
div {
background: url('my-pic.png') center/cover;
height:200px;
width: 400px;
position: relative;
text-align: center;
padding-top: 3em;
box-sizing: border-box;
}
/* pseudo content for overlay */
div::before{
content:'';
background:#000;
position:absolute;
content:'';
width:100%;
height:100%;
left:0;
top:0;
opacity:.3;
}
/* content - make sure it sits above overlay */
div > * { position: relative; z-index: 1; }
div h2 { color: white; }页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50668364
复制相关文章
相似问题