CSS如何設置不透明度較深

-2

我想通過所有圖層將用戶頭像的不透明度設置爲1層。有沒有解決方案？也許用z-index或其他東西？CSS如何設置不透明度較深

來源

2017-01-16 Lestoroer

這不是透明度是如何工作的 - 你不能把它「到層」。如果你想讓頭像圖像與特定背景「混合」，那麼你必須在背後的（/ an）元素上設置背景。 – CBroe

我看到傢伙..但是可能有其他解決方案嗎？我喜歡解決方案CBroe。謝謝。如果我不會找到另一個解決方案，那麼我會使用你的。 – Lestoroer

不幸的是，正如@CBroe所說，圖層彼此堆疊在一起，並且沒有辦法用父子容器的信息修改父容器。你將不得不「僞造」它。 –

我不得不做出以下假設，因爲你還沒有包含在你的問題的任何HTML/CSS：第1層使用的背景圖片，而不是一個固定的<img.../>標籤與z-index設置爲低於所有其他內容。

這是製作示例圖片所需的html/css的最小數量。

這裏的詭計是background-attachment: fixed。這就像在任何其他元素上使用position:fixed一樣。這會將背景圖像（默認情況下）放置在相對於窗口0px x 0px的位置，而不是文檔。通過將其分配給第1層和第3層，您可以在元素上覆蓋相同的背景圖像，從而給出層3爲半透明和查看layer1的印象。

請注意，您將一張圖片放在另一張圖片上，因此如果您在layer1上調整背景圖片的大小，它將無法在layer3上正確顯示。因此，您可能希望有一個非常大的背景圖像，在任何分辨率上看起來都不錯。

爲了說明「透明度」，我給了layer2一個純色的背景。

繼續點擊'運行代碼片段'來加載一組新圖片。

.layer1, 
 
.layer3 { 
 
    background: url(http://lorempixel.com/1000/800/sports/) no-repeat scroll 0 0 transparent; 
 
    background-attachment:fixed; 
 
} 
 
.layer2 { 
 
    background-color:#fff; 
 
    width:70%; 
 
    margin:0 auto; 
 
} 
 
.layer3 { 
 
    display:inline-block; 
 
} 
 
.layer3 img { 
 
    opacity:0.7; 
 
}

<div class="layer1"> 
 
    <div class="layer2"> 
 
    <ul> 
 
     <li><div class="layer3"><img src="http://lorempixel.com/50/50/abstract/"/></div></li> 
 
     <li><div class="layer3"><img src="http://lorempixel.com/50/50/city/"/></div></li> 
 
     <li><div class="layer3"><img src="http://lorempixel.com/50/50/people/"/></div></li> 
 
     <li><div class="layer3"><img src="http://lorempixel.com/50/50/transport/"/></div></li> 
 
     <li><div class="layer3"><img src="http://lorempixel.com/50/50/cats/"/></div></li> 
 
     <li><div class="layer3"><img src="http://lorempixel.com/50/50/sports/"/></div></li> 
 
    </ul> 
 
    </div> 
 
</div>

來源

2017-01-16 12:15:55

謝謝你的時間。 – Lestoroer