如何将背景颜色覆盖添加到div

Question

我在一个div中有两个空的div元素；img"；以及"；覆盖"；。在"；img"；我附上了一个背景网址和"；覆盖"；我只想在背景url的顶部添加一个背景颜色，添加一个叠加效果。

我试着玩位置、高度和填充物，但它只会使项目错位。div位于另一个具有网格显示属性的div中。

Html部件：

<section id="grid">
<div class="main">
<div class="img"></div>
<div class="overlay"></div>
</div>
</section>

Css部件：

.img{
height: 100%;
width: 100%;
background: url("../img/star.jpg");
background-size: cover;
}
.overlay{
background-color: green;
}

Answer 1

要创建覆盖，可以使用z-index属性和背景透明度。

div {
height: 200px;
width: 300px;
position: relative;
margin: 1em;
}
h2 {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.image {
background: url(https://images.unsplash.com/photo-1606145469859-bd36ede24638?crop=entropy&cs=srgb&fm=jpg&ixid=MXwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHw&ixlib=rb-1.2.1&q=85);
}
.overlay {
background: url(https://images.unsplash.com/photo-1606145469859-bd36ede24638?crop=entropy&cs=srgb&fm=jpg&ixid=MXwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHw&ixlib=rb-1.2.1&q=85);
opacity: 0.7;
z-index: 20;
}

<div class="box">
<div class="image"></div>
<h2>Image</h2>
</div>
<div class="box">
<div class="overlay"></div>
<h2>Overlay</h2>
</div>

您必须将文本放在overlaydiv之外。然后您可以将更高的z-index应用于div以将其放在前面。请记住使背景部分透明，否则，文本将不可见。

Answer 2

如果您希望.overlaydiv位于图像div的顶部，一个选项是使用绝对定位。如果是这样的话，如果你想让覆盖像图像效果一样，你还想在覆盖上启用一些透明度。

.overlay {
position: absolute;
height: 100%;
width: 100%;
background-color: #00ff00aa;
}