css如何实现背景透明，文字不透明？
之前做了個半透明彈層，但設(shè)置背景半透明時，子元素包含的字體及其它元素也都變成了半透明。對opacity這個屬性認(rèn)識的不透徹，在這里做一些總結(jié)，方便以后使用。
背景透明，文字不透明的解決方法：
為元素添加一個絕對定位的子元素，設(shè)置大小和該元素一樣，把半透明加在絕對定位元素上作為遮罩，z-index設(shè)置到最底部，達(dá)到背景半透明效果。
使用CSS3新屬性rgba。
實現(xiàn)透明的方法：
css3的opacity，取值從 0 到 1，如opacity : 0.5，IE9及以上版本和標(biāo)準(zhǔn)瀏覽器都支持。IE8 以及更早的版本支持替代的 filter 屬性，例如：filter : Alpha(opacity=50)。
css3的rgba(red, green, blue, alpha)，alpha的取值從 0 到 1，如background-color : rgba(255,255,255,0.5)。
谷歌瀏覽器下測試各種屬性，如下圖。
<div><div>沒有設(shè)置透明度</div></div> <div><div>用opacity設(shè)置透明度</div></div> <div><div>用rgba設(shè)置透明度</div></div> <div><div>IE專屬filter設(shè)置透明度</div></div>
圖1
css3的opacity：
由圖1可以看出，使用opacity屬性的第二個方塊其子元素包含的文字也變成了半透明。
注釋：設(shè)置opacity元素的所有后代元素會隨著一起具有透明性，一般用于調(diào)整圖片或者模塊的整體不透明度，兼容IE9及以上版本和標(biāo)準(zhǔn)瀏覽器。
css3的rgba：
由圖1可看出，設(shè)置rgba的方塊可實現(xiàn)背景色透明，并且子元素包含的文字不透明。
注釋：IE9+、Firefox 3+、Chrome、Safari 以及 Opera 10+都支持。
IE的filter : Alpha(opacity=x)：
僅支持IE6、7、8、9，在IE10版本被廢除。
在IE6、7中，需要激活I(lǐng)E的haslayout屬性(如：*zoom:1或者*overflow:hidden)，讓它讀懂filter:Alpha。
在IE6、7、8中，設(shè)置了filter:Alpha的元素，父元素設(shè)置position : static(默認(rèn)屬性)，其子元素為相對定位position : relative，可讓子元素不透明。
全兼容：
| IE6 | IE7 | IE8 | IE9 | 標(biāo)準(zhǔn)瀏覽器 | |
| rgba | ? | ? | ? | ✔ | ✔ |
| filter : Alpha | ✔ | ✔ | ✔ | ✔ | ? |
只支持IE6、7、8瀏覽器的css hack：
/* 只支持IE6、7、8 */
@media screen\,screen9 {...}
DEMO：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>背景透明，文字不透明</title>
<style>
*{
padding: 0;
margin: 0;
}
body{
background-color: #ff7a74;
padding: 100px;
}
.test-opacity{
padding: 25px;
background-color: rgba(255,255,255,0.5);/* IE9、標(biāo)準(zhǔn)瀏覽器、IE6和部分IE7內(nèi)核的瀏覽器(如QQ瀏覽器)會讀懂 */
}
/* 只支持IE6、7、8 */
@media screen\,screen9 {
.test-opacity{
background-color: #fff;
filter: Alpha(opacity=50);
*zoom:1;/* 激活I(lǐng)E6、7的haslayout屬性，讓它讀懂Alpha */
}
.test-opacity p{
position: relative;/* 設(shè)置子元素為相對定位，可讓子元素不繼承Alpha值 */
}
}
</style>
<body>
<div class="test-opacity">
<p>背景透明，文字不透明</p>
</div>
</body>
</html>
原文 css如何實現(xiàn)背景透明，文字不透明？
總結(jié)
以上是生活随笔為你收集整理的css如何实现背景透明，文字不透明？的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 怎么看显卡性能好坏电脑显卡如何看
- 下一篇： 「经验分享」说一个女孩子心气太高是什么意