css不透明度的設定方法:先建立一個HTML範例檔案;然後用img標籤引入圖片;最後在style標籤中加入css樣式為「opacity: 0.5;」即可設定圖片的透明度。
本文操作環境:Windows7系統、HTML5&&CSS3版,DELL G3電腦
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> <h1>图像透明度</h1> <p>opacity 属性规定元素的透明度。值越低,越透明:</p> <p>50% 不透明度的图像:</p> <img src="/i/photo/tulip-red.jpg" alt="Tulip" width="600" style="max-width:90%"> </body> </html>
效果:
#推薦學習:《css影片教學》
以上是css不透明度怎麼設置的詳細內容。更多資訊請關注PHP中文網其他相關文章!