溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了css如何設置圖片的透明度，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。
css的選擇器可以分為三大類，即id選擇器、class選擇器、標簽選擇器。它們之間可以有多種組合，有后代選擇器、子選擇器、偽類選擇器、通用選擇器、群組選擇器等等
css設置圖片透明度的方法：1、使用filter屬性，給圖片元素添加“filter:opacity(數(shù)值%)”樣式；值在0和100之間，“0%”則是完全透明，“100%”則圖像無變化。2、使用opacity屬性，語法“opacity:值”。
方法1：使用filter屬性--filter:opacity(%)
filter 屬性定義了元素(通常是)的可視效果(例如：模糊與飽和度)。
opacity(%) ：用于轉(zhuǎn)化圖像的透明程度。值定義轉(zhuǎn)換的比例。值為0%則是完全透明，值為100%則圖像無變化。值在0%和100%之間，則是效果的線性乘子，也相當于圖像樣本乘以數(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屬性設置一個元素了透明度級別。值的范圍：從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>效果圖：
感謝你能夠認真閱讀完這篇文章，希望小編分享的“css如何設置圖片的透明度”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業(yè)資訊頻道，更多相關知識等著你來學習!
免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。
