溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶(hù)服務(wù)條款》

html圖片中如何設(shè)置透明度

發(fā)布時(shí)間：2021-06-03 11:56:52 來(lái)源：億速云 閱讀：1684 作者：小新 欄目：web開(kāi)發(fā)

這篇文章將為大家詳細(xì)講解有關(guān)html圖片中如何設(shè)置透明度，小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

html圖片設(shè)置透明度的方法：首先創(chuàng)建一個(gè)div；然后設(shè)置一個(gè)類(lèi)名；最后通過(guò)“filter:alpha(opacity=50);opacity:0.5;”等屬性設(shè)置圖片透明度即可。

本文操作環(huán)境：windows7系統(tǒng)、HTML5&&CSS3版、Dell G3電腦。

關(guān)于設(shè)置背景圖片的透明度（html+css）

設(shè)置背景圖片的透明度，而不是顏色這種，是圖片顯示

這個(gè)就跟某些博客能夠換背景圖片當(dāng)主題一樣的道理，看了好久終于搞清楚了

<body>里面是不能直接設(shè)置圖片的透明度的

需要借助<div>

<style type="text/css">
.bodystyle{
filter:alpha(opacity=50);  
-moz-opacity:0.5;  
-khtml-opacity: 0.5;  
opacity: 0.5;
width:100%;
position:absolute;
background:url(圖像/8.JPG) ; 
background-attachment:fixed;
}
</style>

需要在之前就寫(xiě)好，用類(lèi)的方法表示。

<body >
<div class="bodystyle"></div>
</body>

然后在div中引用這個(gè)類(lèi)，就可以實(shí)現(xiàn)圖片透明度設(shè)置

但是這樣也有問(wèn)題，如果中間有文本存在的話(huà)就會(huì)也變?yōu)橥该髯煮w，而且要當(dāng)背景圖片的話(huà)就需要將文本放入兩個(gè)<div>中間

所以需要在css中設(shè)置文本的字體透明度

opacity: 1;

即可。

關(guān)于“html圖片中如何設(shè)置透明度”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手