css如何实现背景透明，文字不透明？
生活随笔
收集整理的這篇文章主要介紹了
css如何实现背景透明，文字不透明？
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
之前做了個(gè)半透明彈層，但設(shè)置背景半透明時(shí)，子元素包含的字體及其它元素也都變成了半透明。對(duì)opacity這個(gè)屬性認(rèn)識(shí)的不透徹，在這里做一些總結(jié)，方便以后使用。
背景透明，文字不透明的解決方法：- 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)。
?
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?圖1 css3的opacity： ? 由圖1可以看出，使用opacity屬性的第二個(gè)方塊其子元素包含的文字也變成了半透明。 注釋：設(shè)置opacity元素的所有后代元素會(huì)隨著一起具有透明性，一般用于調(diào)整圖片或者模塊的整體不透明度，兼容IE9及以上版本和標(biāo)準(zhǔn)瀏覽器。 css3的rgba： ? 由圖1可看出，設(shè)置rgba的方塊可實(shí)現(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)屬性)，其子元素為相對(duì)定位position : relative，可讓子元素不透明。
| ? | IE6 | IE7 | IE8 | IE9 | 標(biāo)準(zhǔn)瀏覽器 |
| rgba | ? | ? | ? | ? | ? |
| filter : Alpha | ? | ? | ? | ? | ? |
?
轉(zhuǎn)載于:https://www.cnblogs.com/dududyx/p/4885010.html
總結(jié)
以上是生活随笔為你收集整理的css如何实现背景透明，文字不透明？的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 台灣的注音和大陸的拼音對照,放到這裡留作
- 下一篇： 2021年全球入侵检测和防御系统（IDP