溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇“html中img圖片設(shè)置透明度的方法”除了程序員外大部分人都不太理解，今天小編為了讓大家更加理解“html中img圖片設(shè)置透明度的方法”，給大家總結(jié)了以下內(nèi)容，具有一定借鑒價值，內(nèi)容詳細步驟清晰，細節(jié)處理妥當，希望大家通過這篇文章有所收獲，下面讓我們一起來看看具體內(nèi)容吧。
1、簡易性：超級文本標記語言版本升級采用超集方式，從而更加靈活方便，適合初學前端開發(fā)者使用。 2、可擴展性：超級文本標記語言的廣泛應(yīng)用帶來了加強功能，增加標識符等要求，超級文本標記語言采取子類元素的方式，為系統(tǒng)擴展帶來保證。 3、平臺無關(guān)性：超級文本標記語言能夠在廣泛的平臺上使用，這也是萬維網(wǎng)盛行的一個原因。 4、通用性：HTML是網(wǎng)絡(luò)的通用語言，它允許網(wǎng)頁制作人建立文本與圖片相結(jié)合的復雜頁面，這些頁面可以被網(wǎng)上任何其他人瀏覽到，無論使用的是什么類型的電腦或瀏覽器。
html img圖片設(shè)置透明度的方法：1、給img圖片設(shè)置“opacity:value;”樣式，value值在0.0（完全透明）到1.0（完全不透明）之間；2、給img圖片設(shè)置“filter:opacity(%);”樣式。
html img圖片設(shè)置透明度
方法1：使用opacity設(shè)置圖片透明度
Opacity屬性設(shè)置一個元素了透明度級別。
語法：
opacity: value;
屬性值：
value：指定不透明度。從0.0（完全透明）到1.0（完全不透明）
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
.img2{
opacity: 0.5;
}
</style>
</head>
<body>
<div>
<p>原圖：</p>
<img src="demo/img/5.jpg" width="300"/>
</div>
<div>
<p>設(shè)置透明度的圖：</p>
<img class="img2" src="demo/img/5.jpg" width="300"/>
</div>
</body>
</html>效果圖：
方法2：使用filter:opacity(%)
filter 屬性定義了元素(通常是<img>)的可視效果(例如：模糊與飽和度)。
opacity(%) ：轉(zhuǎn)化圖像的透明程度。值定義轉(zhuǎn)換的比例。值為0%則是完全透明，值為100%則圖像無變化。值在0%和100%之間，則是效果的線性乘子，也相當于圖像樣本乘以數(shù)量。 若值未設(shè)置，值默認是1。該函數(shù)與已有的opacity屬性很相似，不同之處在于通過filter，一些瀏覽器為了提升性能會提供硬件加速。
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
.img2{
-webkit-filter: opacity(100%); /* Chrome, Safari, Opera */
filter: opacity(20%);
}
</style>
</head>
<body>
<div>
<p>原圖：</p>
<img src="demo/img/5.jpg" width="300"/>
</div>
<div>
<p>設(shè)置透明度的圖：</p>
<img class="img2" src="demo/img/5.jpg" width="300"/>
</div>
</body>
</html>效果圖：
感謝你的閱讀，希望你對“html中img圖片設(shè)置透明度的方法”這一關(guān)鍵問題有了一定的理解，具體使用情況還需要大家自己動手實驗使用過才能領(lǐng)會，快去試試吧，如果想閱讀更多相關(guān)知識點的文章，歡迎關(guān)注億速云行業(yè)資訊頻道！
免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機網(wǎng)站二維碼