CSS 背景透明 文字不透明

在 IE 上指定 css opacity 屬性,可以讓容器的背景顏色變的透明。但被包在此一容器上的子元素,他們的文字、邊框、背景色也會受透明度的影響。要讓子元素不受父元素透明度的影響,可以在子元素上指定 css position 屬性為 relative 或是 absolute 。

有些 Browsers 已有支援 css RGBa 屬性。就可以直接用 css RGBa 屬性設定透明度,如此被包在裏面的子元素的顯示,就不會受到父元素透明度的影響而變得有些透明。

Browser, Version, Platform Outcome Fallback
Mozilla Firefox 3.x (and up) Works
Mozilla Firefox 2.x (and down) Doesn’t Work Solid Color
Google Chrome (any version) Works
WebKit – Safari 3.x (and up) Works
WebKit – Safari 2.x (and down) Doesn’t Work
Mobile Safari (iPhone / iPod Touch / iPad) Works
Opera 10.x (and up) Works
Opera 9.x (and down) Doesn’t Work Solid Color
Internet Explorer 9 Preview Works
Internet Explorer 8 (down to 6) Doesn’t Work Solid Color
Internet Explorer 5.5 (and down) Doesn’t Work No Color
Netscape (any version) Doesn’t Work Solid Color
BlackBerry Storm Browser Works
  • IE9 已支援 RGBa 要記註喔!
  • 在 IE 上被設定為背景透明的父容器,如果它的 css: position 屬性為 absolute 時。請不要再指定 css: z-index 屬性給它。因為這樣會讓子元素不受父容器透明度影響的設定無效。如果頁面上有多個容器為透明背景且position:absolute,請將要放置最下層容器HTML代碼寫在其它容器元素代碼之前。

用 jQuery 判斷透明度是要用「opacity」、還是「RGBa」。

$(function () {
            if ($.browser.msie && $.browser.version < 9.0) { //不包含ie9

                $(".fixed_block").css({ opacity: "0.4", "background-color": "white" });
                $("#i_menu,#top_menu").css({ opacity: "0.7", "background-color": "white" });
            }
            else {
                $(".fixed_block").css({ background: "rgba(255, 255, 255, 0.4)" });
                $("#i_menu,#top_menu").css({ background: "rgba(255, 255, 255, 0.7)" });
            }
        });

參考來源:
RGBa Browser Support

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / 變更 )

Twitter picture

You are commenting using your Twitter account. Log Out / 變更 )

Facebook照片

You are commenting using your Facebook account. Log Out / 變更 )

Google+ photo

You are commenting using your Google+ account. Log Out / 變更 )

連結到 %s