站長資訊網(wǎng)css設(shè)置圖片透明度的方法：1、使用filter屬性，給圖片元素添加“filter:opacity(數(shù)值%)”樣式；值在0和100之間，“0%”則是完全透明，“100%”則圖像無變化。2、使用opacity屬性，語法“opacity:值”。
本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。
方法1：使用filter屬性–filter:opacity(%)
filter 屬性定義了元素(通常是)的可視效果(例如：模糊與飽和度)。
opacity(%) ：用于轉(zhuǎn)化圖像的透明程度。值定義轉(zhuǎn)換的比例。值為0%則是完全透明，值為100%則圖像無變化。值在0%和100%之間，則是效果的線性乘子，也相當(dāng)于圖像樣本乘以數(shù)量。 若值未設(shè)置，值默認是1。該函數(shù)與已有的opacity屬性很相似，不同之處在于通過filter，一些瀏覽器為了提升性能會提供硬件加速。
示例：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> .img1{ -webkit-filter: opacity(50%); /* Chrome, Safari, Opera */ filter: opacity(50%); } .img2{ -webkit-filter: opacity(20%); /* Chrome, Safari, Opera */ filter: opacity(20%); } </style> </head> <body> <div> <p>原圖：</p> <img src="img/1.jpg" width="300"/> </div> <div> <p>透明度為50%：</p> <img class="img1" src="img/1.jpg" width="300"/> </div> <div> <p>透明度為20%：</p> <img class="img2" src="img/1.jpg" width="300"/> </div> </body> </html>
效果圖：
方法2：使用opacity屬性
Opacity屬性設(shè)置一個元素了透明度級別。值的范圍：從0.0（完全透明）到1.0（完全不透明）。
示例：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> .img1{ opacity: 0.5; } .img2{ opacity: 0.2; } </style> </head> <body> <div> <p>原圖：</p> <img src="img/1.jpg" width="300"/> </div> <div> <p>透明度為0.5：</p> <img class="img1" src="img/1.jpg" width="300"/> </div> <div> <p>透明度為0.2：</p> <img class="img2" src="img/1.jpg" width="300"/> </div> </body> </html>
效果圖：
（學(xué)習(xí)視頻分享：css視頻教程）
