第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全，請及時綁定郵箱和手機(jī)立即綁定
已解決430363個問題，去搜搜看，總會有你想問的

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

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

慕斯709654 2023-02-24 15:20:51
我需要一個圖像重疊另一個。但是第二張圖片有背景色，我需要第一張圖片介于第二張和第二張的背景色之間。有可能的？已經(jīng)嘗試創(chuàng)建一個新的“div 類”而不是 style="background-color"?，F(xiàn)在我堅持這個：.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貢獻(xiàn)1818條經(jīng)驗 獲得超7個贊

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

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

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

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

}

<div class="image"><img src="https://www.fillmurray.com/200/300" /></div>


查看完整回答
反對 回復(fù) 2023-02-24
?
UYOU

TA貢獻(xiàn)1878條經(jīng)驗 獲得超4個贊

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


.secondimage img{

    max-width: 100%;

    height: auto;

    position: relative;

    top: -75px;

    margin: 5px;

        margin-bottom: 10px;

}

現(xiàn)在只需要找出如何關(guān)閉這個問題...謝謝 :)


查看完整回答
反對 回復(fù) 2023-02-24
?
慕娘9325324

TA貢獻(xiàn)1783條經(jīng)驗 獲得超4個贊

如果我理解你想要實現(xiàn)的目標(biāo)，你可能應(yīng)該將圖像放在背景 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 class="mainRunner">

  <div class="background">

    <img src="image1.png" class="firstimage" />

    <img src="image2.png" class="secondimage " />

  </div>

</div>

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


查看完整回答
反對 回復(fù) 2023-02-24
?
慕村225694

TA貢獻(xiàn)1880條經(jīng)驗 獲得超4個贊

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

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


查看完整回答
反對 回復(fù) 2023-02-24
  • 4 回答
  • 0 關(guān)注
  • 173 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

 公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號