溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下css不透明度的設置方法，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
css不透明度的設置方法：首先創建一個HTML示例文件；然后用img標簽引入圖片；最后在style標簽中添加css樣式為“opacity: 0.5;”即可設置圖片的透明度。
css可以使用filter:alpha()與opacity兩種方式設置不透明度，直接利用opacity設置不透明度的時候其大小范圍為0-1，使用filter:alpha()設置時大小范圍在1-100之間。
filter:alpha()與opacity一樣都是設置透明度的，但是opacity 在IE8及以下是不兼容的；所以要設置filter屬性
a:hover { opacity: 1; filter: alpha(opacity=100);}當直接利用opacity設置透明度的時候其大小范圍為0-1之間，為1的時候為不透明，當利用filter:alpha()設置opacity的時候其大小范圍為0-100之間，為100的時候為不透明
filter:alpha()的基本屬性
filter：alpha（opacity，finishopacity，style，startX，startY，finishX，finishY）.
opacity：透明度級別，范圍是0-100，0代表完全透明，100代表完全不透明。
finishopacity：設置漸變的透明效果時，用來指定結束時的透明度，范圍也是0 到 100。
style：設置漸變透明的樣式，值為0代表統一形狀、1代表線形、2代表放射狀、3代表長方形。
startX和startY：代表漸變透明效果的開始X和Y坐標。
finishX和finishY：代表漸變透明效果結束X和Y 的坐標。
opacity屬性：
opacity: value|inherit;
value 規定不透明度。從 0.0 （完全透明）到 1.0（完全不透明）。
inherit 應該從父元素繼承 opacity 屬性的值。
示例：
<!DOCTYPE html>
<html>
<head>
<style>
img {
opacity: 0.5;
}
</style>
</head>
<body>
<h2>圖像透明度</h2>
<p>opacity 屬性規定元素的透明度。值越低，越透明：</p>
<p>50% 不透明度的圖像：</p>
<img src="/i/photo/tulip-red.jpg" alt="Tulip" width="600" height="400">
</body>
</html>效果：
以上是“css不透明度的設置方法”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
