這個問題在這里已經有了答案： 在不影響子元素的情況下設定背景影像的不透明度 （15 個答案） CSS 背景影像不透明度？ （13 個答案） 8 小時前關閉。
- 這只是一個沒有背景影像的虛擬示例，但如果我有背景影像，我將如何實作改變影像不透明度而不影響文本的目標？
這是一個代碼示例： HTML：
<div class=bg-img>
<p> Lorem Ipsum. </p>
</div>
CSS：
.bg-img {
background-img: url();
background-repeat: no-repeat;
background-position: center;
background-size: cover;
opacity: 0.8;
}
p {
color: white;
}
uj5u.com熱心網友回復：
所以我不認為你所問的是直接可能的，但這是一種獲得你正在尋找的效果的方法。
將您的內容與包含背景的 div 分開。然后將這兩個包裝在容器 div 中并將該 div 設定為position: relative;
現在獲取您的內容并為其提供以下代碼：
position: absolute;
top: 0;
left: 0;
看看我在這里做了什么：
.bg-img {
background-image: url(https://external-content.duckduckgo.com/iu/?u=https://tse3.mm.bing.net/th?id=OIP.VKpiZHX8o1MQRM3NLjQaGQHaE8&pid=Api&f=1&ipt=46d3f722b06b0265f5e520392239e52a3b5e8a19f77a81b52fea18d43b5df116&ipo=images);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
height: 250px;
opacity: 0.5;
}
.contain {
position: relative;
}
.contain p {
position: absolute;
top: 0;
left: 0;
}<div class="contain">
<div class=bg-img></div>
<p> Lorem Ipsum. </p>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/535638.html
標籤：网页格式CSS