我有 3 個(gè)水平對(duì)齊的圖像。我為對(duì)齊的圖像設(shè)置了背景圖像（背景圖像），如下所示。當(dāng)我運(yùn)行代碼時(shí)，背景圖像會(huì)覆蓋圖像。我希望 3 個(gè)對(duì)齊的圖像出現(xiàn)在背景圖像的頂部。我嘗試使用box-shadow它無(wú)法工作。我不希望背景圖像跨越 3 個(gè)對(duì)齊圖像中的任何一個(gè)。請(qǐng)問我該怎么做？超文本標(biāo)記語(yǔ)言<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貢獻(xiàn)1829條經(jīng)驗(yàn) 獲得超7個(gè)贊
嗯，所以您希望 background.png 出現(xiàn)在其他圖像后面？如果您堅(jiān)持將其包含在 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>
慕尼黑8549860
TA貢獻(xiàn)1818條經(jīng)驗(yàn) 獲得超11個(gè)贊
CSS：
.img?{
???background-image:?url('../images/pic.jpg');
}
- 2 回答
- 0 關(guān)注
- 168 瀏覽
添加回答
舉報(bào)
0/150
提交
取消