首頁  >  文章  >  web前端  >  css怎麼設定背景圖透明

css怎麼設定背景圖透明

青灯夜游
青灯夜游原創
2021-10-12 18:23:5934212瀏覽

在css中,可以利用opacity屬性來設定背景圖片透明,該屬性的作用就是設定元素的透明度,只需要給設定了背景圖片的元素加上「opacity: 透明度值;」樣式即可。

css怎麼設定背景圖透明

本教學操作環境:windows7系統、CSS3&&HTML5版、Dell G3電腦。

在css中,可以利用opacity屬性來設定背景圖片透明。

Opacity屬性設定一個元素了透明度級別,透明度級別(屬性值)從0.0(完全透明)到1.0(完全不透明)。

程式碼範例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<style>
			div{
				width: 400px;
				height: 230px;
				background:url(img/3.jpg) no-repeat;
				background-size: 400px 226px;
			}
			.box{
				opacity: 0.5;
			}
		</style>
	</head>

	<body>	
		<div></div> 
        <div class="box"></div> 
	</body>

</html>

效果圖:

css怎麼設定背景圖透明

#(學習影片分享:css視頻教程

以上是css怎麼設定背景圖透明的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn