我想将两个 DIV 堆叠在一起，并使一个透明，这样您就可以看到它后面的 div。 使用 CSS 和 HTML

Question

我在 div 中有一个背景图像，我希望能够在背景图像的顶部放置另一个具有较低不透明度的黑框，以便您可以看穿它并使图像变暗。

Answer 1

You can use z-index on an image in a container to push it to the back of the div to act as a background-image by giving it a z-index of -1 and the parent a z-index of 1. Then position it absolute and use it to fill the whole parent.

An implementation is here below:

**My index.html **

<div class="container">
    <div class="content">
        <img src="./images/img.jpg" alt="">
        <h1>My content</h1>
    </div>
</div>

**My style.css **

.container {
    position: relative;
    display: grid;
    place-content: center;
    z-index: 1;
}
.container .content {
    width: 100%;
    height: 100%;
    background-color: #00000052;
}
.container img {
    position: absolute;
    z-index: -1;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

Answer 2

The easiest way to accomplish this effect is by applying the CSS brightness filter directly on the image.

You could certainly stack two divs on top of each other with absolute/relative positioning and z-index, but those can create other issues and will require you to write more code for less performance.

 .dark { filter: brightness(40%); }

 <img src="https://randomuser.me/api/portraits/women/68.jpg" width="200" height="200" alt="" /> <img class="dark" src="https://randomuser.me/api/portraits/women/68.jpg" width="200" height="200" alt="" />