溫馨提示×

css怎么實現背景圖片透明文字不透明

css
小億
231
2023-08-08 20:42:45
欄目: 編程語言

要實現背景圖片透明,文字不透明的效果,可以使用CSS的偽元素和定位技巧來實現。

首先,將要顯示的文字包裹在一個容器元素內。例如,使用一個 div 元素作為容器:

<div class="container">
<h1>Hello, World!</h1>
</div>

然后,使用CSS設置容器元素的 position 屬性為 relative,并設置 z-index 為較大的值,使其位于背景圖片之上:

.container {
position: relative;
z-index: 2;
}

接下來,使用偽元素 ::before::after 來創建一個與容器大小相同的偽元素,并設置其背景圖片和透明度。注意要將偽元素的 position 屬性設置為 absolute,并設置其 top、right、bottomleft 屬性為 0,以使其覆蓋整個容器:

.container::before {
content: "";
background-image: url("背景圖片的URL");
opacity: 0.5; /* 設置背景圖片透明度 */
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
}

最后,通過設置容器內文字的透明度來控制文字的不透明度??梢允褂?rgba() 函數來設置文字顏色,并通過設置透明度的值來控制不透明度。例如,設置文字顏色為紅色,不透明度為 0.8

.container h1 {
color: rgba(255, 0, 0, 0.8); /* 設置文字顏色和不透明度 */
}

這樣就可以實現背景圖片透明,文字不透明的效果了。

0
亚洲午夜精品一区二区_中文无码日韩欧免_久久香蕉精品视频_欧美主播一区二区三区美女