首頁猿問 background-color...

background-color 可以有不同于 img 的 z-index 嗎？

JavaScript

慕斯709654 2023-02-24 15:20:51

我需要一個圖像重疊另一個。但是第二張圖片有背景色，我需要第一張圖片介于第二張和第二張的背景色之間。有可能的？已經嘗試創建一個新的“div 類”而不是 style="background-color"?，F在我堅持這個：.mainRunner { position: relative;}.firstimage { position: relative; z-index: 2;}.secondimage { position: relative; z-index: 3; top: -75px;}.background { position: relative; z-index: 1}<div class="firstimage" style="max-width: 1170px;"><img src="" alt="" title="" style="width: 100%;" max-width="1168" height="399" caption="false" /></div><div class="background" style="background-color: #f2e5df;"><div class="secondimage"><a href=""> <img src="" alt="" title="" /> </a></div></div>

查看完整描述

4 回答

qq_笑_17

TA貢獻1818條經驗獲得超7個贊

您不能為元素的某些屬性賦予不同的z-index值。但是對于像 a 這樣的某些元素，div您可以使用::before偽::after元素。你可以z-index在上面設置一個，有效地創建三個層。更多信息在這里。

在這種情況下，您可以創建一個div中間img在里面的。然后添加一個::beforeand::after到那個div。給一個背景顏色和z-index-1。另一個是背景圖像和z-index1。

在下面的示例中，我還在首字母周圍添加了一些邊距和邊框div，以便您可以更好地了解發生了什么。

.image {

margin: 20px 0 0 20px;

position: relative;

border: 3px solid coral;

width: 200px;

height: 300px;

}

.image::before,

.image::after {

content: '';

display: block;

width: 200px;

height: 300px;

position: absolute;

}

.image::before {

z-index: -1;

background: cornflowerblue;

top: 20px;

left: 20px;

}

.image::after {

z-index: 1;

background: url("https://www.fillmurray.com/200/300");

top: -20px;

left: -20px;

}

反對回復 2023-02-24

UYOU

TA貢獻1878條經驗獲得超4個贊

最后解決方案很簡單。在樣式中是第二個圖像的雙重定義。其中第一個只是部分評論。所以我的第一篇文章是這樣工作的：

.secondimage img{

max-width: 100%;

height: auto;

position: relative;

top: -75px;

margin: 5px;

margin-bottom: 10px;

}

現在只需要找出如何關閉這個問題...謝謝 :)

反對回復 2023-02-24

慕娘9325324

TA貢獻1783條經驗獲得超4個贊

如果我理解你想要實現的目標，你可能應該將圖像放在背景 div 中并將第二個圖像放置在position: absolute：

<style>

.mainRunner {

position: relative;

}

.firstimage {

position: relative;

z-index: 2;

}

.secondimage {

position: absolute;

z-index: 3;

top: 20px; /* use top and left values to place the image exactly where you want it over the first image */

left: 20px

}

.background {

position: relative;

z-index: 1;

background-color: #f2e5df;

}

</style>

</div>

它將背景顏色設置為最后面的元素，然后在其頂部設置secondimage和firstimage。

反對回復 2023-02-24

慕村225694

TA貢獻1880條經驗獲得超4個贊

答案是否定的……沒有辦法將 z-index 專門定位到元素的背景，z-index 和所有其他 CSS 屬性都作用于整個元素，而不僅僅是作用于它的背景。

你將不得不找到另一種方法來做到這一點，你有沒有想過使用一個沒有內容但圖像大小相同的 div，然后只為那個特定的 div 設置背景顏色？

反對回復 2023-02-24

4 回答
0 關注
167 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

background-color 可以有不同于 img 的 z-index 嗎？

background-color 可以有不同于 img 的 z-index 嗎？

4 回答

添加回答

background-color 可以有不同于 img 的 z-index 嗎？