設定元素透明度的css3屬性是什麼-前端問答-PHP中文網

設定元素透明度的css3屬性是什麼

青灯夜游

發布： 2021-12-16 11:02:34

原創

2629 人瀏覽過

設定元素透明度的css3屬性有兩種：1、opacity屬性，可設定元素的透明度級別，語法「opacity:透明度值;」；2、filter屬性，與opacity()函數一起使用可設定元素透明度，語法「filter:opacity(值%);」。

設定元素透明度的css3屬性是什麼

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

設定元素透明度的css3屬性

#1、opacity屬性

Opacity屬性設定一個元素了透明度等級。

語法：

opacity: value;

登入後複製

value ：指定不透明度；從0.0（完全透明）到1.0（完全不透明）。

範例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
	</head>
	<body>
		<img  src="img/2.jpg" / alt="設定元素透明度的css3屬性是什麼" >
		<img  src="img/2.jpg"   style="max-width:90%"/ alt="設定元素透明度的css3屬性是什麼" >
	</body>
</html>

登入後複製

設定元素透明度的css3屬性是什麼

#2、filter屬性

##filter 屬性定義了元素(通常是設定元素透明度的css3屬性是什麼

)的可視效果(例如：模糊與飽和度)。

filter 屬性與opacity()函數一起使用可設定元素透明度。

值定義轉換的比例。值為0%則為完全透明，數值為100%則影像無變化。值在0%和100%之間，則是效果的線性乘子，也相當於影像樣本乘以數量。若值未設置，值預設為1。函數與現有的opacity屬性很相似，不同之處在於透過filter，有些瀏覽器為了提升效能會提供硬體加速。

範例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
	</head>
	<body>
		<img  src="img/2.jpg" / alt="設定元素透明度的css3屬性是什麼" >
		<img  src="img/2.jpg"   style="max-width:90%"/ alt="設定元素透明度的css3屬性是什麼" >
	</body>
</html>

登入後複製

設定元素透明度的css3屬性是什麼