<td id="ms32e"></td>

    <sub id="ms32e"></sub>

        對高端網站的追求從未停止
        當前位置: 首頁 > 新聞資訊 > 技術文章

        關于CSS透明度的兩種使用方法以及優缺點

        發布: 2021年01月14日 瀏覽:

        關于CSS透明度的兩種使用方法以及優缺點(圖1)

        第一種方法:通過backgroud和opacity設置背景透明

        在建網站時opacity屬性參數的"不透明度"是以數字表示,從 0.0 至 1.0 都可以,完全透明是 0.0,完全不透明是 1.0,就是說:數字越大代表元素越不透明。參數除了可以使用"不透明度"之外,還有 inherit 繼承父層屬性,不過瀏覽器支援度較差,不建議使用。

        注意事項:一定要考慮不同瀏覽器的兼容性寫法,正確應該這樣寫:


        .transparent{  

              filter:alpha(opacity=50);  

              -moz-opacity:0.5;  

              -khtml-opacity: 0.5;  

              opacity: 0.5;  

        }


        類.transparent代表的是透明度是50%。

        opacity背景顏色透明度的弊端:應用此方法會使整個box的透明度都變成了50%,包括背景和背景上面的圖片或文字。有時我們只是想讓背景透明而上面的文字正常顯示,此時就不合適了,需要考慮使用第二種方法。


        第二種方法:利用rgba的方式來設置背景透明度

        網站中所謂RGBA顏色,就是RGB三原色加ALPHA。在給背景添加顏色的同時,提供透明度特性。

        用法:background:rgba(R,G, B, A); A代表透明度從0.0到1。

        示例:


        <div style="background-color:rgba(151,25,31,0.5);">背景紅色透明度50%,而上面的文字正常顯示</div>


        說明:通過rgba方式設置背景顏色透明度,可以設置背景顏色透明而文字不透明


        您準備好了嗎?
        稱呼: 手機:
        或撥打:1500-1888-798
      1. 上海小程序制作

        微信公眾號

      2. 網站制作

        客服微信號

      3. 業務咨詢 1500-1888-798

        (7*24) 小時貼心服務

        在線咨詢
        關于宿橙 COPYRIGHT ? 2008-2020 上海宿橙網絡技術有限公司 ALL RIGHTS RESERVED滬ICP備14017448號-10

        地址:上海市嘉定區鶴旋路58號816室(江橋萬達廣場8號寫字樓)

        售前咨詢1500-1888-798
        通過微信掃碼聯系客服
        Top 免费观看院线电影app欧美_成年AV漫画在线观看_国内大学生自拍在线播放_日韩国产欧美AV

        <td id="ms32e"></td>

          <sub id="ms32e"></sub>