html<img> 標簽而不是 css 背景圖像

Question

我目前使用 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");
}

我嘗試使用這篇文章作為指南，創建以下內容：

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

但是，這不會顯示包裝器中的內容，並且不會顯示圖像右側的一部分。 我怎樣才能做到這一點？

Answer 1

您可以給img一個z-index和其他一切更高的z-index 。

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

這將使img更靠前，但.banner-options更靠前。