首頁 > web前端 > html教學 > 相容性背景顏色半透明CSS程式碼(不影響內部子元素)

相容性背景顏色半透明CSS程式碼(不影響內部子元素)

WBOY
發布: 2016-08-30 09:21:11
原創
2479 人瀏覽過

如何簡單相容性的實作父元素是半透明背景色,而子元素不受影響。

相容於所有瀏覽器的背景顏色半透明CSS代碼:

background-color: rgba(<span style="color: #800080;">0</span>, <span style="color: #800080;">0</span>, <span style="color: #800080;">0</span>, .<span style="color: #800080;">25</span><span style="color: #000000;">);
filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr</span>=#<span style="color: #800080;">40000000</span>,endColorStr=#<span style="color: #800080;">40000000</span>);
登入後複製

注意:startColorStr 和 endColorStr 的值,前兩位是十六進位的透明度,後面六位是十六進位的顏色。

其格式為 #AARRGGBB 。 AA 、 RR 、 GG 、 BB 為十六進位正整數。取值範圍為 00 - FF 。 RR 指定紅色值, GG 指定綠色值, BB 指定藍色值,請參閱 #RRGGBB 顏色單位。 AA 指定透明度。 00 是完全透明。 FF 是完全不透明。超出取值範圍的值將恢復為預設值。

2位元透明度的轉換方法:x=alpha*255 ,將計算的結果 x 轉換成十六進位即可。

js換算16進位方法: x.toString(16)

例如:上面的 0.25 透明度,換算為IE的AA透明度: var a = 0.25 * 255 = 63.75 ~= 64;  a.toString(16) = 40

Demo範例:

<style type=<span style="color: #800000;">"</span><span style="color: #800000;">text/css</span><span style="color: #800000;">"</span>><span style="color: #000000;">
.menu</span>-nav-<span style="color: #000000;">bg {
    background</span>-color: rgba(<span style="color: #800080;">0</span>, <span style="color: #800080;">0</span>, <span style="color: #800080;">0</span>, .<span style="color: #800080;">25</span><span style="color: #000000;">);
    filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr</span>=#<span style="color: #800080;">40000000</span>,endColorStr=#<span style="color: #800080;">40000000</span><span style="color: #000000;">);
}
</span><span style="color: #008000;">/*</span><span style="color: #008000;"> css hack: rgba background with IE filter alternative: IE9 renders both! </span><span style="color: #008000;">*/</span><span style="color: #000000;">
.menu</span>-nav-<span style="color: #000000;">bg:not([dummy]) {
   filter: progid:DXImageTransform.Microsoft.Gradient(enabled</span>=<span style="color: #800000;">'</span><span style="color: #800000;">false</span><span style="color: #800000;">'</span><span style="color: #000000;">);
}
</span><span style="color: #008000;">/*</span><span style="color: #008000;"> 对于IE9,除了使用 :not([dummy]) hack 外,还可以使用 :root,推荐使用这个
 * :root 选择器已经被现代主流浏览器支持了,除了IE8及以下IE浏览器
 </span><span style="color: #008000;">*/</span><span style="color: #000000;">
:root .menu</span>-nav-<span style="color: #000000;">bg {
   filter: progid:DXImageTransform.Microsoft.Gradient(enabled</span>=<span style="color: #800000;">'</span><span style="color: #800000;">false</span><span style="color: #800000;">'</span><span style="color: #000000;">);
}
</span></style>
<div <span style="color: #0000ff;">class</span>=<span style="color: #800000;">"</span><span style="color: #800000;">menu-nav-bg</span><span style="color: #800000;">"</span>>
    <a href=<span style="color: #800000;">"</span><span style="color: #800000;">#</span><span style="color: #800000;">"</span>>我的首页</a>
    |
    <a href=<span style="color: #800000;">"</span><span style="color: #800000;">#</span><span style="color: #800000;">"</span>>我的微博</a>
</div>
登入後複製

思想:現代瀏覽器使用 CSS3 RGBA 實現半透明背景色,IE使用 漸變濾鏡 filter: progid:DXImageTransform.Microsoft.Gradient 實現半透明。

注意:不能使用 opacity:0.5 屬性或是 IE filter:alpha(opacity=50) 半透明濾鏡,因為這個半透明屬性會讓子元素也跟著半透明。

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板