html<；img>；标签代替css背景图像

我目前使用css

background image

属性获得了一个正常工作的背景。但是我想使用html

bla bla内容、按钮等

.横幅{
显示器：flex；
对齐项目：居中；
溢出：隐藏；
位置：相对位置；
高度：528px；
宽度：100%；
边缘底部：11px；
背景色：#000；
.img{
位置：绝对位置；
对象匹配：覆盖；
最小宽度：100%；
最大宽度：100%；
z指数：-1；
}
}

---

但是，这不会显示包装中的内容，并且不会显示图像右侧的一部分。我怎样才能做到这一点呢？

你可以给

img

a

z-index

和其他任何东西一个更高的

z-index

<section className="banner">
    <div className="container">
        <div className="wrapper">
            <p>bla bla content, buttons, etc.</p>
        </div>
    </div>
</section>

.banner {
    display: flex;
    align-items: center;
    background-size: cover;
    height: 428px;
    margin-bottom: 11px;
    background-color: #000;
    background-image: url("/image.jpg");
}

---

这将把

img

放在更前面，但是

.banner选项

甚至更远。

你可以给

img

一个

z-index

和其他所有东西一个更高的

z-index

<section className="banner">
    <div className="container">
        <div className="wrapper">
            <p>bla bla content, buttons, etc.</p>
        </div>
    </div>
</section>

.banner {
    display: flex;
    align-items: center;
    background-size: cover;
    height: 428px;
    margin-bottom: 11px;
    background-color: #000;
    background-image: url("/image.jpg");
}

---

这将把

img

放在更前面，但是

.banner选项

甚至更远。

注意，另一个问题的答案是

img{

在

之外。banner sectiom{

也从

中删除句点。img{/code>事实上，我在
banner里面有
img{
{
只是我使用的css库的一部分，所以这是正确的。从
.img{
开始的句点确实不应该在那里。我已经删除了它。结果是：它正确显示了…除了…横幅部分的背景色“覆盖”了图像。如果我给图像一个更高的
z-index
，则显示图像，但是“覆盖”包装内容“…如果我从
横幅
中删除
背景色
，它仍会以白色显示该部分，因此不会显示图像（我认为该图像位于该部分下方）…给图像一个z索引，给其他所有内容一个更高的索引。是的！为
添加一个
z索引：0；
。banner
成功了！谢谢，如果您将其添加为答案，我将接受它。请注意，另一个问题中的答案在
banner sectiom之外有
img{
{
另外，从
中删除句点。img{
事实上我在
中有
img{
。banner{
只是我使用的css库的一部分，所以这是正确的。
中的句点{
确实不应该在那里。我已经删除了它。结果：它正确显示了…除了…横幅部分的背景颜色“覆盖”了图像。如果我给图像更高的
z-index
，图像将显示，但“覆盖”了包装内容“…如果我从
横幅
中删除
背景色
，它仍会以白色显示该部分，因此不会显示图像（我认为该图像位于该部分下方）…给图像一个z索引，给其他所有内容一个更高的索引。是的！为
添加一个
z索引：0；
。banner
成功了！谢谢，如果您将其添加为答案，我将接受它。
img { z-index: -1; }
.banner-options: { z-index: 0 }