Html 背景中的图像以包含它

嘿，伙计们，如果不使用背景图像属性，我希望图像包含整个div，但是其他元素“1”和“5”阻止了这种情况的发生。我该怎么办

 <div id ="trial" style="
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 150px;
    align-content: center;
    border : 4px solid black;
    "
    >
    <div style="background-color: blue; height: 20px;" class="item">1</div>
    <img style="margin: 0px; padding: 0px; flex-grow: 1; width: 175px; height: 150px; z-index: -1;" id="slideShowImage" src="C:\\Users\\disley\\Desktop\\New folder\\Slideshow\\imag.1.jpg"/>
    <div style="background-color: blue; height: 20px; width: 20px;" class="item">5</div>
    </div>

1.
5.

Flexbox需要这种行为。我会在Flexbox上读一些书

做这个

1.
5.

因为您声明1和5具有特定的宽度和高度，所以无法使用图片覆盖整个帧。您需要使用display:absolut，这样您就可以覆盖1个和5个元素，还需要放置宽度：100%，这样它就可以覆盖整个框架。顺便说一句，我建议还添加height:auto，这样它就适合移动设备并对移动设备做出响应=]

当我添加另一个图像时，该图像不会出现，我不知道这意味着什么。nvm它刚刚做到了！有一个错误，我修复了它。泰，它成功了。很好，我的代码中有一个bug，刚才，我复制并粘贴了错误的图像，这与你无关。是顶部和左侧的属性帮助图像在z索引后保持那样吗

     <div id ="trial" style="
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 150px;
    align-content: center;
    border : 4px solid black;
    position:relative;
    "
    >
    <div style="background-color: blue; height: 20px;" class="item">1</div>
    <img style="position:absolute; z-index: -1; top: 0; left: 0; width: 100%; height: 100%; z-index: -1;" id="slideShowImage" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTbrXPRpe_c7Jl99y4N6oDx_Mn9fAIPGYEsSEROYyADGchjH_qQrdskBBE"/>
    <div style="background-color: blue; height: 20px; width: 20px;" class="item">5</div>
    </div>