html <img> 标签而不是 css background-image答案

【问题标题】：html <img> tag instead of css background-imagehtml <img> 标签而不是 css background-image
【发布时间】：2020-12-17 05:54:14
【问题描述】：

我目前使用 css background-image 属性使背景正常工作。但相反，我想使用 html <img> 标签。我拥有background-image 属性：

<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");
}

我尝试使用this post 作为指导，创建以下内容：

<section className="banner">
    <img
        alt=""
        src={"/image.jpg"}
    />
    <div className="container">
        <div className="wrapper">
            <p>bla bla content, buttons, etc.</p>
        </div>
    </div>
</section>

.banner {
    display: flex;
    align-items: center;
    overflow: hidden;
    position: relative;
    
    height: 528px;
    width: 100%;
    margin-bottom: 11px;
    background-color: #000;

    .img {
        position: absolute;
        object-fit: cover;
        min-width: 100%;
        max-width: 100%;
        z-index: -1;
    }
}

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

【问题讨论】：

请注意，另一个问题的答案在.banner-sectiom {之外有img {
另外，从.img {中删除句点
我在.banner { 中拥有img { 只是我使用的css 库的一部分，所以这是正确的。 .img { 的时间段确实不应该存在。我已将其删除。结果：它正确显示......除了......横幅部分的背景颜色“覆盖”了图像。如果我给图像一个更高的z-index，图像会显示，但会“覆盖”包装内容”......如果我从banner 中删除background-color，它仍然会以白色显示该部分，因此不会显示图像（我认为在该部分下方）..
给图片一个z-index，给其他所有东西一个更高的index。
是的！为.banner 添加z-index: 0; 就成功了！谢谢，如果您将其添加为答案，我会接受。

标签： html css

【解决方案1】：

您可以给img 一个z-index 和其他任何一个更高的z-index。

img { z-index: -1; }
.banner-options: { z-index: 0 }

这将使img 更靠前，但.banner-options 更远。

【讨论】：