css設(shè)置半透明背景
2018-11-01 來源：學(xué)做網(wǎng)站論壇
在網(wǎng)頁設(shè)計(jì)和網(wǎng)站制作過程中，為了達(dá)到某個(gè)效果需要網(wǎng)站布局的某個(gè)DIV是透明的或者是半透明的。如下圖：
怎么在自己做網(wǎng)站時(shí)運(yùn)用這個(gè)CSS樣式達(dá)到設(shè)置DIV背景為透明，半透明效果呢？
在CSS中有一個(gè)filter（濾鏡效果）屬性，可以設(shè)置它的值來達(dá)到DIV背景的透明程度，從不透明到半透明再到全透明的效果都可以輕易達(dá)到。（如果對(duì)HTML代碼不了解，可以學(xué)習(xí)一下：html入門教程）
設(shè)置DIV背景為透明，半透明的CSS樣式代碼：
/*IE*/-moz-opacity:1.0;/*Moz+FF*/ }
代碼解釋：
通過設(shè)置“opacity=100”中后臺(tái)的值，從0-100，數(shù)值越大，DIV層越透明。如果要求半透明，可以設(shè)置為50，全透明設(shè)置為100。帶filter的層一定要有width寬度屬性，否則filter無效。
代碼舉例：
DIV背景半透明，DIV中的字不半透明：
圖層背景半透明，字體顏色不半透明：
通過設(shè)置DIV層的filter（濾鏡效果），可以達(dá)到很多的效果：
黑白照片效果：
X光照片效果：
風(fēng)動(dòng)模糊效果：
正弦波紋效果：
半透明效果：
線型透明效果：
放射透明效果：
白色透明效果：
降低色彩效果：
底片效果效果：
左右翻轉(zhuǎn)效果：
垂直翻轉(zhuǎn)效果：
投影效果效果：
馬賽克效果：
發(fā)光效果效果：
柔邊效果效果：
標(biāo)簽： 代碼 網(wǎng)站制作
版權(quán)申明：本站文章部分自網(wǎng)絡(luò)，如有侵權(quán)，請(qǐng)聯(lián)系：west999com@outlook.com
特別注意：本站所有轉(zhuǎn)載文章言論不代表本站觀點(diǎn)！
本站所提供的圖片等素材，版權(quán)歸原作者所有，如需使用，請(qǐng)與原作者聯(lián)系。
