我有 3 個水平對齊的圖像。我為對齊的圖像設置了背景圖像（背景圖像），如下所示。當我運行代碼時，背景圖像會覆蓋圖像。我希望 3 個對齊的圖像出現在背景圖像的頂部。我嘗試使用box-shadow它無法工作。我不希望背景圖像跨越 3 個對齊圖像中的任何一個。請問我該怎么做？超文本標記語言<div class="col-lg-12"> <img src="images/background.png" alt="Change"> <div class="img"> <div class="column-img"> <img src="/images/pic.jpg" alt="" width="426" height="479"> </div> <div class="column-img"> <img src="/images/pic.jpg" alt="" width="425" height="479"> </div> <div class="column-img"> <img src="/images/change.jpg" alt="" width="426" height="479"> </div> </div></div>CSS//how I align my 3 images horizontally..column-img { float: left; width: 33.33%; padding: 5px;}
2 回答
千巷貓影
TA貢獻1829條經驗 獲得超7個贊
嗯，所以您希望 background.png 出現在其他圖像后面？如果您堅持將其包含在 DOM 中，則需要將其從文檔流中刪除。像這樣的東西：
.column-img {
float: left;
width: 33.33%;
padding: 5px;
}
.background {
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
.background-anchor {
position: relative;
}
<div class="col-lg-12 background-anchor">
<img class="background" src="https://placekitten.com/1300/1300" alt="Change">
<div class="img">
<div class="column-img">
<img src="https://placekitten.com/426/479" alt="" width="426" height="479">
</div>
<div class="column-img">
<img src="https://placekitten.com/425/479" alt="" width="425" height="479">
</div>
<div class="column-img">
<img src="https://placekitten.com/426/479" alt="" width="426" height="479">
</div>
</div>
</div>
- 2 回答
- 0 關注
- 203 瀏覽
添加回答
舉報
0/150
提交
取消