欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

css 背景半透明最佳實踐

  發(fā)布時間：2011-10-30 11:07:01   作者：佚名   我要評論
透明作為一種效果增強的方案，被眾多視覺設計師喜歡。但因為 IE 的原因，透明，特別是半透明，已經成為前端工程師最不愿意實現(xiàn)的東西
現(xiàn)在有一個需求，需要對一個純色的層實現(xiàn)半透明效果。效果如下，邊框需要透明，透明度為 #000000 的 30%：

背景半透明

用各種瀏覽器打開下面這個 DEMO, IE9 有特殊顯示：http://demo.jb51.net/js/2011/transparentbg/

一、使用 opacity + Alpha Filter

看起來手挺簡單的吧？嗯。挺簡單的… 希望你能很方便實現(xiàn)這個方案！其實見到這個的時候，我們的第一想法當然是 background + opacity，在不支持 opacity 的 IE 使用 filter 的 alpha 濾鏡來實現(xiàn)。然后，我們得到這樣的效果：

背景半透明

.opacity{
    background:#000;
    opacity:0.3;
    filter: alpha(opacity=30);
}

無一例外，最外層，最內層和文字，都被設置了 opacity（alpha 也是使用 opacity ） 。當然，我們可以給各層設置 opacity 變回來。但這是多麻煩的事(不信試一下)。

二、最佳實踐：rgba色彩 + Gradient Filter

其實我們可以選用 background-color: rgba() 來實現(xiàn)，同樣可以實現(xiàn)透明效果，并且只應用于當前元素，不繼承。而 IE 的 filter 有很多濾鏡效果。其中的漸變?yōu)V鏡，只要變通一下，就可以實現(xiàn)我們想要的效果，并且這個濾鏡不會被下級元素繼承，這樣元素的內容就不會被虛化。代碼如下：

復制代碼
代碼如下:

/*
* filter 漸變?yōu)V鏡詳細用法，[<a target="_blank" >參見這里</a>]
* StartColorStr 和 EndColorStr:
* #4c000000 是 30% 透明度的 #000000 的意思
* 組成: # + 透明度 + 顏色
* 算法: Math.floor(0.6 * 255).toString(16);
*/
.rgba{
background:rgba(0, 0, 0, 0.3);
filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#4c000000', EndColorStr='#4c000000');
}

不過，我們得到的效果是這樣的，IE9 的透明度竟然有 60%!! 這顯然不是我們想法的。原因是：IE9 也支持 filter，使得 filter 的結果和 background-color 疊加，所以是 60%。具體參見 DEMO 和示例圖:

背景半透明

那么我們可以利用 IE 的 HACK，單獨把 IE9 的 filter 變成透明度為 0 即可。高級瀏覽器大部分支持 :root 偽類，但不支持 filter 屬性，而 IE 只有 IE9 支持，所以我們可以這樣寫。代碼如下：


復制代碼
代碼如下:

:root .rgba{
filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#00000000', EndColorStr='#00000000');
}

當然，第二種方法可以應用于 background，也可應用于 border 上。整體的代碼可參見 DEMO。最后，還是那句話，期待你更好的解決方案。

參考文獻：

相關文章

  • 純CSS實現(xiàn)背景半透明文字不透明效果兼容IE6

    在某些情況下可能會需要背景半透明文字不透明這樣的效果，實現(xiàn)起來并不復雜，通過濾鏡便可做到，具體實現(xiàn)如下，感興趣的朋友可以參考下，希望對大家有所幫助
    2013-08-05

  • 背景半透明效果CSS鏈接樣式代碼

    想不想要自己的主頁鏈接很炫呢，背景半透明的鏈接效果，空鏈接實現(xiàn)的鏈接效果，只需要定義一個特效式的CSS樣式即可以實現(xiàn)，在需要實現(xiàn)的地方應用定義的CSS樣式，也可以全站
    2013-02-27

  • css實現(xiàn)背景半透明文字不透明的效果示例

    本篇文章主要介紹了css實現(xiàn)背景半透明文字不透明的效果示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2018-05-08

最新評論