css實現(xiàn)背景透明而文字不透明

平時我們所說的調(diào)整透明度，其實就是在樣式中調(diào)整不透明度，而實現(xiàn)透明的css方法通常有如下3中方式：

css3的opacity:x。x的取值為0到1，如opacity:0.5表示不透明度為50%；

css3的rgba(red,green,blue,alpha)，alpha的取值為0到1，如rgba(255,255,255,0.5)表示不透明度為50%；

IE專屬濾鏡filter:Alpha(opacity=x)，x的取值為0到100，如filter:Alpha(opacity=50)表示不透明度為50%

css3的opacity

兼容性：IE6、7、8都不支持，IE9及以上和其他標(biāo)準(zhǔn)的瀏覽器都支持

但是使用opacity設(shè)置元素的不透明度會使其所有后代元素都會隨著一起具有透明度，一般都用于調(diào)整圖片或者模塊的整體不透明度

opacity

*{

padding: 0;

margin: 0;

}

body{

padding: 50px;

background-color:#eef ;

}

.demo{

padding: 25px;

background-color:#000000;

opacity: 0.2;

}

.demo p{

color: #FFFFFF;

}

背景透明，文字也透明

使用后整個模塊都會變透明，效果如下：

所以只使用opacity想是想背景透明，文字不透明是不行的。

css3的rgba

兼容性：IE6、7、8都不支持，IE9及以上版本和標(biāo)準(zhǔn)的瀏覽器都支持

rgba設(shè)置顏色的不透明度，一般都用于調(diào)整background-color、color、box-shadow等的不透明度

總結(jié)

以上是生活随笔為你收集整理的button css背景透明,css背景透明的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。