Question

嘿家伙没有使用背景图片属性，我希望图片包含整个div，但其他元素＆＃39; 1＆＃39;和＆＃39; 5＆＃39;阻止这种情况发生。我该怎么办？

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

Answer 1

Flexbox预计会出现这种情况。我会在Flexbox上做一些阅读。

这样做......

http://jsbin.com/migiwojeva/edit?html,output

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

Answer 2

因为您声明具有特定宽度和高度的1和5，所以您无法使用图片覆盖整个帧。你需要使用display：absolut，这样你甚至可以覆盖1和5个元素，还需要放宽：100％，这样它就可以覆盖整个框架。顺便提一下，我建议把高度：自动设置为适合移动设备并对其进行响应=]

在背景中的图像包含它

2 个答案: