css如何實現背景透明，文字不透明？

之前做了個半透明彈層，但設置背景半透明時，子元素包含的字體及其它元素也都變成了半透明。對opacity這個屬性認識的不透徹，在這里做一些總結，方便以后使用。

背景透明，文字不透明的解決方法：

為元素添加一個絕對定位的子元素，設置大小和該元素一樣，把半透明加在絕對定位元素上作為遮罩，z-index設置到最底部，達到背景半透明效果。
使用CSS3新屬性rgba。

實現透明的方法：

css3的opacity，取值從 0 到 1，如opacity : 0.5，IE9及以上版本和標準瀏覽器都支持。IE8 以及更早的版本支持替代的 filter 屬性，例如：filter : Alpha(opacity=50)。
css3的rgba(red, green, blue, alpha)，alpha的取值從 0 到 1，如background-color : rgba(255,255,255,0.5)。

谷歌瀏覽器下測試各種屬性，如下圖。

<div style="width:150px;height:100px;float:left;background-color:#ff0000;"><div>沒有設置透明度</div></div>
<div style="width:150px;height:100px;float:left;margin-left:10px;background-color:#ff0000;opacity:0.5;"><div>用opacity設置透明度</div></div>
<div style="width:150px;height:100px;float:left;margin-left:10px;background-color:rgba(255,0,0,0.5);"><div>用rgba設置透明度</div></div>
<div style="width:150px;height:100px;float:left;margin-left:10px;background-color:#ff0000;filter:Alpha(opacity=50);"><div>IE專屬filter設置透明度</div></div>

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?圖1

css3的opacity：

由圖1可以看出，使用opacity屬性的第二個方塊其子元素包含的文字也變成了半透明。

注釋：設置opacity元素的所有后代元素會隨著一起具有透明性，一般用于調整圖片或者模塊的整體不透明度，兼容IE9及以上版本和標準瀏覽器。

css3的rgba：

由圖1可看出，設置rgba的方塊可實現背景色透明，并且子元素包含的文字不透明。

注釋：IE9+、Firefox 3+、Chrome、Safari 以及 Opera 10+都支持。

IE的filter : Alpha(opacity=x)：

僅支持IE6、7、8、9，在IE10版本被廢除。

在IE6、7中，需要激活IE的haslayout屬性(如：*zoom:1或者*overflow:hidden)，讓它讀懂filter:Alpha。
在IE6、7、8中，設置了filter:Alpha的元素，父元素設置position : static(默認屬性)，其子元素為相對定位position : relative，可讓子元素不透明。

? ? ?

全兼容：

?	IE6	IE7	IE8	IE9	標準瀏覽器
rgba	?	?	?	?	?
filter : Alpha	?	?	?	?	?

只支持IE6、7、8瀏覽器的css hack：

/* 只支持IE6、7、8 */

@media \0screen\,screen\9 {...}

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、標準瀏覽器、IE6和部分IE7內核的瀏覽器(如QQ瀏覽器)會讀懂 */
}/* 只支持IE6、7、8 */
@media \0screen\,screen\9 {.test-opacity{background-color: #fff;filter: Alpha(opacity=50);*zoom:1;/* 激活IE6、7的haslayout屬性，讓它讀懂Alpha */}.test-opacity p{position: relative;/* 設置子元素為相對定位，可讓子元素不繼承Alpha值 */}
}
</style>
<body><div class="test-opacity"><p>背景透明，文字不透明</p></div></body>
</html>

轉載于:https://www.cnblogs.com/dududyx/p/4885010.html

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/256570.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/256570.shtml
英文地址，請注明出處：http://en.pswp.cn/news/256570.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！