我有一个简单的<div>(无固定长度),其中带有文本:
<div id="section">
<div class="container">
<h1>text</h1>
<p>More text</p>
</div>
<!-- <div id="overlay"></div> -->
</div>
CSS类似于:
#section {
background: red;
overflow: hidden;
}
可以添加具有透明图像背景的div吗?
叠加层应悬停在主要红色背景上,但要在文本下方。
我认为是这样的,但不起作用:
#section #overlay {
position: relative;
top: 0px;
left: 0px;
width: 100%;
height: 100px; /* ??? */
background: green;
opacity: 0.1;
}
#section {
background: red;
display: block;
position: relative;
overflow: hidden;
}
#container {
position: relative;
width: 100%;
text-align: center;
z-index: 9999;
}
#overlay {
position: absolute;
left: 0;
width: 100%;
height: 100%;
top: 0;
background-color: rgba(0,0,0,0.3);
}
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句