如何設置html的透明度：1？通過“背景色：RGBA (0，152，50，0.7)；”設置不透明度；2.使用半透明粒子圖片或漸變半透明PNG圖片；3.使用透明度和背景色或背景圖片。

本文操作環(huán)境：windows7系統(tǒng)，HTML5CSS3版本3，戴爾G3電腦。

HTML/CSS標簽透明效果的實現(xiàn)在HTML CSS編程中，通常有三種方法實現(xiàn)半透明背景，即使用RGBA、PNG和CSS濾鏡。

(資料圖片)

方法一。第一個是HTML5的透明度，在H5支持透明背景色，但遺憾的是，H5的透明背景色只支持rgba書寫，不支持十六進制書寫，比如：

背景-color:rgba(0，152，50，0.7)；//-70%不透明度

背景-color : transparent；支持完全透明

在傳統(tǒng)瀏覽器中，IE瀏覽器的唯一性也是一些透明度設置的不確定性因素。

一般來說，在firefox、webkit、khtml陣營中實現(xiàn)透明的方式非常簡單，包括IE9和比IE9大的瀏覽器使用上面的HTML5來設置透明。但是，這種方法在IE9以下的瀏覽器中完全無效。

【推薦學習：HTML視頻教程】【推薦：css視頻教程】

方法2第二種方法是使用半透明粒子圖片、圖案或漸變半透明PNG圖片。這個方法是兼容的，只是IE6需要用插件修改PNG不透明的bug。

支持很好，設置可以重復，定位可以做，尺寸也可以在H5設置。但是如果你在網(wǎng)頁上追求極致，加載的圖片越少越好。

(粒子：透明度對稱的圖片裁剪到5px * 5px以下，加載速度快很多)

background:url(路徑/my_png_bg.png)無重復居中滾動；

方法三。第三種方法是用透明背景色或背景圖片來實現(xiàn)。

背景-color:rgb(0，152，50)；

opacity:0.7background:url(路徑/my_bg.jpg)無重復居中滾動；

opacity:0.7那么，問題來了。IE6-IE8完全不支持不透明度，所以我們不得不考慮IE的濾鏡。

IE中有很多濾鏡，其中alpha通道用來設置不透明度。

濾波器：(opactity=70)因此，上述方案進行了如下改進

背景-color:rgb(0，152，50)；

opacity:0.7

filter:alpha(不透明度=70)；background:url(路徑/my_bg.jpg)無重復居中滾動；

opacity:0.7

filter:alpha(不透明度=70)；

注意：不透明度或alpha的值強調(diào)“無”透明度。

綜上所述，推薦第三種方案。

開發(fā)實用的html

頭

meta charset="utf-8 "

標題不透明度/標題

meta http-equiv=" X-UA-Compatible "內(nèi)容="IE=7，chrome=1.0 "

樣式類型=“text/CSS”rel=“樣式表”

*{

padding: 0px

margin:0px

}。mainbox{

寬度： 200 px；

高度： 200 px；

clear:兩者；

飛越：隱藏；

margin: 100px自動0px自動；

背景-color : # f06；

}。子主盒

{

寬度： 250 px；

高度： 200 px；

margin :-50px auto 0px auto；

border:1px純白色；

border-radius : 5px；

/* *背景-color:rgb(0，152，50)；**/

background:url(路徑/my_bg.jpg)無重復居中滾動；

opacity: 0.7

filter:alpha(不透明度=70)；

}

/style

/head

身體

p class="mainbox "

/p

p class="子主盒"

/p

/body

/html以上是如何在html中設置透明度的細節(jié)。請多關注php中文網(wǎng)站的其他相關文章！

來源：php中文網(wǎng)站

標簽：