精品国语人妻色乱码二区,免费乱理伦片在线观看2018,日韩精品视频在线播放,高潮无码又爽又刺激视频在线

<source id="8jepl"><menu id="8jepl"></menu></source>
    <source id="8jepl"><menu id="8jepl"></menu></source>
    <rp id="8jepl"><mark id="8jepl"><label id="8jepl"></label></mark></rp>
          <source id="8jepl"><menu id="8jepl"><label id="8jepl"></label></menu></source>
          <source id="8jepl"></source>
              <source id="8jepl"></source>
                <video id="8jepl"><menu id="8jepl"></menu></video>
                0712-2888027 189-8648-0214
                微信公眾號

                孝感風(fēng)信網(wǎng)絡(luò)科技有限公司微信公眾號

                當(dāng)前位置:主頁 > 技術(shù)支持 > HTML5/CSS3 > RGBA顏色與兼容性的半透明背景色

                RGBA顏色與兼容性的半透明背景色

                時間:2016-04-28來源:風(fēng)信官網(wǎng) 點擊: 1357次

                所謂RGBA顏色,顧名思意就是R+G+B+A的顏色,再具體點就是RED+GREEN+BLUE+ALPHA的顏色,小寫一下就是red+green+blue+alpha的顏色,翻譯一下就是紅+綠+藍(lán)+Alpha透明的顏色。

                我們平時用的較多的是16進(jìn)制顏色,例如黑色#000000;白色#FFFFFF,這些是16進(jìn)制表示的顏色,如果使用RGB顏色表示就是 rgb(0, 0, 0)與rgb(255,255,255),其實本質(zhì)上是一樣的,只是一個是16進(jìn)制表示的,一個是二進(jìn)制表示的(RGB顏色)。

                而RGBA顏色歸為CSS3屬性,其余RGB的區(qū)別在于多了個A,也就是Alpha透明度,這是個很好的東西啊,我們以后要實現(xiàn)半透明效果(無論是 背景,邊框,文字顏色等都可以用半透明實現(xiàn)了),但是,一向不緊不慢,孤芳自賞的IE家族,目前為止還不支持rgba顏色,真是讓人哀嘆?。?/p>

                您可以參見下面各個瀏覽器對rgba的支持情況一覽表,這個表不是我做的,里面把瀏覽器的祖宗十八代都挖出來了,不得不佩服圖表制作者,一些跟鳳姐一樣稀奇古怪的瀏覽器可以直接忽略掉:

                瀏覽器、版本、平臺 結(jié)果 后備
                Firefox 3.6 (OS X) 作用
                Firefox 3.0.5 (OS X) 作用
                Firefox 3.0.5 (Windows XP, Vista) 作用
                Firefox 2.0.0.18 (PC) 無作用 實色
                Safari 4 (Developer Preview & 4.0.4, OS X) 作用
                Safari 3.2.1 (OS X, Windows XP) 作用
                Mobile Safari (iPhone) 作用
                Opera 9.6.1 無作用 實色
                Opera 10 Beta (Linux & Windows) 作用
                Opera 10.10 (OS X) 作用
                IE 4.01 無作用 沒有顏色
                IE 5.5 (PC via IETester) 無作用 沒有顏色
                IE 6 (PC via IETester) 無作用 實色
                IE 7 無作用 實色
                IE 8 (Beta 2 & release version) 無作用 實色
                Google Chrome 0.4.154.33 (Windows XP) 作用
                Google Chrome 1.0.154.46 (Windows XP) 作用
                Google Chrome 4.0.249.49 (OS X) 作用
                Netscape 4.8 (PC) 無作用 沒有顏色
                Navigator 9.0.0.5 Linus 無作用 實色
                SeaMonkey 1.1.14 無作用 沒有顏色
                SeaMonkey 2.0 作用
                Sunrise 1.7.5 作用
                Stainless 0.2.5 作用
                Flock 1.2.7 無作用 實色
                Flock 2.0.2 作用
                BlackBerry Storm Browser 作用
                Camino 1.6.6 無作用 實色
                Camino 2.0b1 作用
                Iceape 1.1.14 (Linux) 無作用 實色
                Kazehakase 0.5.2 (Linux) 無作用 實色
                Avant 11.7 (Windows XP) 無作用 實色

                對于rgba的使用,您可以參見下面的簡單示例:

                background:rgba(200, 54, 54, 0.5);
                

                其中,表示半透明度的0.5前面的0是可以省掉的,直接.5也是可以的。

                正如上表所展示的,IE8及其以下都對實用的rgba顏色不支持,怎么半呢?

                其實細(xì)想一下,rgba顏色多了個什么東西呢,不就是半透明嗎,IE不是由半透明濾鏡嘛,我們只要使用:

                filter:alpha(opacity=50);

                不也很ok嗎?

                是嗎?只要靜下來一想,完全不是那么回事,IE半透明濾鏡透明的是整個元素,它可以只透明元素的邊框嗎?它可以只透明文字的投影嗎?都不行。

                正所謂車到山前必有路,IE下某一屬性是可以實現(xiàn)類似于rgba的效果的,那就是半透明背景。

                IE下背景半透明的方案

                實現(xiàn)IE下僅僅背景色的半透明沒有什么玄乎的,就是IE濾鏡,準(zhǔn)確的講是IE漸變?yōu)V鏡。關(guān)于IE漸變?yōu)V鏡,我曾在“CSS實現(xiàn)兼容性的漸變背景(gradient)效果”一文中有過一些介紹,但是不是很全。

                這里可以稍微在補(bǔ)充下下:
                此濾鏡上半身特征是 FILTER:progid:DXImageTransform.Microsoft.Gradient
                最簡單的使用如下:

                filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#AARRGGBB,endColorStr=i#AARRGGBB)

                startColorStr:可選項。字符串(String)。設(shè)置或檢索色彩漸變的開始顏色和透明度。
                  其格式為 #AARRGGBB 。 AA 、 RR 、 GG 、 BB 為十六進(jìn)制正整數(shù)。取值范圍為 00 – FF 。 RR 指定紅色值, GG 指定綠色值, BB 指定藍(lán)色值,參閱 #RRGGBB 顏色單位。 AA 指定透明度。 00 是完全透明。 FF 是完全不透明。超出取值范圍的值將被恢復(fù)為默認(rèn)值。
                  取值范圍為 #FF000000 – #FFFFFFFF 。默認(rèn)值為 #FF0000FF 。不透明藍(lán)色。
                EndColorStr:可選項。字符串(String)。設(shè)置或檢索色彩漸變的結(jié)束顏色和透明度。參閱 startColorStr 屬性。默認(rèn)值為 #FF000000 。不透明黑色。

                此濾鏡還有諸如Enabled參數(shù)和GradientType參數(shù),具體含義不是本文重點,掠過~~

                我們關(guān)心的是這里的顏色表示,即#AARRGGBB,看到這里前面的兩個AA字母沒,這個AA不是指吃飯K歌的AA,而 是指rgba中的那個a,也就是透明度的意思,只是與rgba不同的是,這里的AA是要用16進(jìn)制表示的(非小數(shù)值),也就是從00~FF,00表示完全 透明了,F(xiàn)F則相當(dāng)于rgba中1,表示完全不透明實色一個。

                好了,現(xiàn)在這個買賣好做了,就像雖然閆鳳嬌和阿嬌長相差異很大,但是都是很清純的女生,于是呢,我們就可以實現(xiàn)兼容性,實現(xiàn)統(tǒng)一了。

                rgba+filter實現(xiàn)兼容性的半透明背景效果

                參見如下的示例代碼:

                background:rgba(0,0,0,0.5); filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#7F000000,endcolorstr=#7F000000);

                上面代碼所實現(xiàn)的效果是讓所有主流瀏覽器下元素可以實現(xiàn)50%透明的黑色背景。類似下面的效果:
                RGBA顏色與兼容性的半透明背景色

                實際的應(yīng)用

                如果能夠直接實現(xiàn)兼容性的背景色,那么很多事情就好辦了。例如我們要實現(xiàn)兼容性的半透明邊框,就不需要上下左右拼湊了,最好的例子莫過于jQuery的boxy彈出層效果了。
                中文漢化后的boxy插件的預(yù)覽圖 張鑫旭-鑫空間-鑫生活

                看到上面的黑色的半透明邊框沒,由于兼容性的問題,這里的圓角黑色半透明邊框是怎么實現(xiàn)的呢?是四角的圖片+四邊的opacity半透明拼接實現(xiàn)的,不可不謂消耗巨大。

                其實,一切都可以很輕松的。應(yīng)用本文所敘述的半透明背景色方法,加上一點漸進(jìn)增強(qiáng),我們來看看如果最高效的實現(xiàn)黑色半透明邊框,如下代碼:

                .opacity_bg_box{
                    background:rgba(0,0,0,0.5);
                    -moz-border-radius:5px;
                    -webkit-border-radius:5px;
                    border-radius:5px;
                    filter:progid:DXImageTransform.Microsoft.gradient(startcolorstr=#7F000000,endcolorstr=#7F000000);
                    padding:8px;
                    position:absolute;
                    top:20px;
                }
                .opacity_in_box{
                    border:1px solid #f0f3f9;
                    background:white;
                    font-size:0;
                }

                對于HTML代碼如下:

                <div class="opacity_bg_box">
                    <div class="opacity_in_box">
                        <img data-src="http://image.zhangxinxu.com/image/study/s/s256/mm13.jpg" />
                    </div>
                </div>

                結(jié)果如下圖所示:
                Firefox下半透明邊框效果 張鑫旭-鑫空間-鑫生活
                IE6下半透明邊框效果 張鑫旭-鑫空間-鑫生活

                結(jié)語

                雖然IE濾鏡這個東西盡量避免實現(xiàn),但是在有些特殊情況下,權(quán)衡下來,此處的方法還是有一定的使用價值的。如果一切都是我做主,我可能就會讓IE瀏 覽器直接實色表示了,畢竟,主要的功能沒有多大影響,其次,實色也是蠻好看的,權(quán)衡利弊,IE的表現(xiàn)稍遜一點反而是上佳選擇,當(dāng)然,這只是我個人的看法, 每個人的經(jīng)歷,關(guān)注的領(lǐng)域,以及經(jīng)驗的不同會導(dǎo)致對問題看法的不同,您可能不認(rèn)為如此。好了,就這么多,我確實累的不行了,女人太煩了真是麻煩~~~

                熱門關(guān)鍵詞: RGBA顏色 兼容性 半透明背景色
                欄目列表
                推薦內(nèi)容
                熱點內(nèi)容
                展開