首頁 >web前端 >前端問答 >設定元素透明度的css3屬性是什麼

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

青灯夜游原創: 2021-12-16 11:02:342786瀏覽

設定元素透明度的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="/static/imghwm/default1.png"  data-src="img/2.jpg"  class="lazy"   / alt="設定元素透明度的css3屬性是什麼" >
		<img  src="/static/imghwm/default1.png"  data-src="img/2.jpg"  class="lazy"     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="/static/imghwm/default1.png"  data-src="img/2.jpg"  class="lazy"   / alt="設定元素透明度的css3屬性是什麼" >
		<img  src="/static/imghwm/default1.png"  data-src="img/2.jpg"  class="lazy"     style="max-width:90%"/ alt="設定元素透明度的css3屬性是什麼" >
	</body>
</html>

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

#（學習影片分享：

css影片教學）

以上是設定元素透明度的css3屬性是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章！

html5 css css3 Filter

陳述：

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

上一篇：pre是html5新增的標籤嗎下一篇：pre是html5新增的標籤嗎

看更多