久久久久精品国产,丰满少妇粗大猛烈进高清播放,久久久97,在线18禁

<wbr id="x3zex"><nav id="x3zex"><em id="x3zex"></em></nav></wbr>

        <s id="x3zex"></s>
        1. <ruby id="x3zex"><nav id="x3zex"><acronym id="x3zex"></acronym></nav></ruby>
          <font id="x3zex"><noscript id="x3zex"></noscript></font>
          0712-2888027 189-8648-0214
          微信公眾號(hào)

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

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

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

          時(shí)間:2016-04-28來(lái)源:風(fēng)信官網(wǎng) 點(diǎn)擊: 1357次

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

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

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

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

          瀏覽器、版本、平臺(tái) 結(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) 無(wú)作用 實(shí)色
          Safari 4 (Developer Preview & 4.0.4, OS X) 作用
          Safari 3.2.1 (OS X, Windows XP) 作用
          Mobile Safari (iPhone) 作用
          Opera 9.6.1 無(wú)作用 實(shí)色
          Opera 10 Beta (Linux & Windows) 作用
          Opera 10.10 (OS X) 作用
          IE 4.01 無(wú)作用 沒(méi)有顏色
          IE 5.5 (PC via IETester) 無(wú)作用 沒(méi)有顏色
          IE 6 (PC via IETester) 無(wú)作用 實(shí)色
          IE 7 無(wú)作用 實(shí)色
          IE 8 (Beta 2 & release version) 無(wú)作用 實(shí)色
          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) 無(wú)作用 沒(méi)有顏色
          Navigator 9.0.0.5 Linus 無(wú)作用 實(shí)色
          SeaMonkey 1.1.14 無(wú)作用 沒(méi)有顏色
          SeaMonkey 2.0 作用
          Sunrise 1.7.5 作用
          Stainless 0.2.5 作用
          Flock 1.2.7 無(wú)作用 實(shí)色
          Flock 2.0.2 作用
          BlackBerry Storm Browser 作用
          Camino 1.6.6 無(wú)作用 實(shí)色
          Camino 2.0b1 作用
          Iceape 1.1.14 (Linux) 無(wú)作用 實(shí)色
          Kazehakase 0.5.2 (Linux) 無(wú)作用 實(shí)色
          Avant 11.7 (Windows XP) 無(wú)作用 實(shí)色

          對(duì)于rgba的使用,您可以參見(jiàn)下面的簡(jiǎn)單示例:

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

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

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

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

          filter:alpha(opacity=50);

          不也很ok嗎?

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

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

          IE下背景半透明的方案

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

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

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

          startColorStr:可選項(xiàng)。字符串(String)。設(shè)置或檢索色彩漸變的開(kāi)始顏色和透明度。
            其格式為 #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:可選項(xiàng)。字符串(String)。設(shè)置或檢索色彩漸變的結(jié)束顏色和透明度。參閱 startColorStr 屬性。默認(rèn)值為 #FF000000 。不透明黑色。

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

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

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

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

          參見(jiàn)如下的示例代碼:

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

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

          實(shí)際的應(yīng)用

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

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

          其實(shí),一切都可以很輕松的。應(yīng)用本文所敘述的半透明背景色方法,加上一點(diǎn)漸進(jìn)增強(qiáng),我們來(lái)看看如果最高效的實(shí)現(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;
          }

          對(duì)于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下半透明邊框效果 張?chǎng)涡?鑫空間-鑫生活
          IE6下半透明邊框效果 張?chǎng)涡?鑫空間-鑫生活

          結(jié)語(yǔ)

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

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