• <var id="zvtmq"></var>
      <tt id="zvtmq"><pre id="zvtmq"></pre></tt>

      <font id="zvtmq"></font>

      <tt id="zvtmq"></tt>

        <var id="zvtmq"></var>
        <mark id="zvtmq"><pre id="zvtmq"><td id="zvtmq"></td></pre></mark>

        1. 
          

          <var id="zvtmq"><object id="zvtmq"><noscript id="zvtmq"></noscript></object></var><label id="zvtmq"><button id="zvtmq"><address id="zvtmq"></address></button></label>

            <tt id="zvtmq"><wbr id="zvtmq"></wbr></tt>
            <strike id="zvtmq"><output id="zvtmq"></output></strike>

          1. <del id="zvtmq"><wbr id="zvtmq"><meter id="zvtmq"></meter></wbr></del>

          2. <small id="zvtmq"></small>

            <code id="zvtmq"><rt id="zvtmq"></rt></code>
          3. <listing id="zvtmq"><object id="zvtmq"></object></listing>

                  文章导航

                  CSS 透明度

                  2018-9-9 00:32| 作者: admin| 查看: 1806| 评论: 0|来自: 蚂蚁部落

                  默认情况,元素是全透明的,文本是不透明的。

                  但是在实际应用中,进行一些透明度的设置,比如图片半透明背景的文本说明。

                  阅读本文后可以参阅CSS图片上面添加文字说明一文加强理解。

                  本文将结合代码实例介绍一下CSS有哪几种方式可以实现设置透明度的功能。

                  特别说明:考虑到软硬件的进步,本文不考虑IE8和IE8以?#33853;?#35272;器兼容性问题。

                  一.opacity属性设置:

                  利用此属性可以非常轻松的实现透明度设置效果。

                  代码实例如下:

                  [HTML] 纯文本查看 复制代码运行代码
                  <!DOCTYPE html>
                  <html lang="zh-cn">
                  <head>
                  <meta charset=" utf-8">
                  <meta name="author" content="http://www.pecf.tw/" />
                  <title>蚂蚁部落</title>
                  <style>
                  div {
                    width:150px;
                    line-height:100px;
                    background-color:blue;
                    opacity:0.5;
                    text-align:center;
                  }
                  </style>
                  </head>
                  <body>
                  <div>蚂蚁部落</div>
                  </body>
                  </html>

                  上面代码可以设置div元素为半透明,同时div中的文本也被设置为半透明。

                  opacity属性专业用来设置透明度,值介于0-1之间,0表示完全透明,1表示完全不透明。

                  实际应用中,往往不希望影响文本的透明度,否则影响阅读,下面做一下介绍。

                  二.RGBA设置透明度:

                  此属性在设置背景颜色的同时,一并设置透明度。

                  代码实例如下:

                  [HTML] 纯文本查看 复制代码运行代码
                  <!DOCTYPE html>
                  <html lang="zh-cn">
                  <head>
                  <meta charset=" utf-8">
                  <meta name="author" content="http://www.pecf.tw/" />
                  <title>蚂蚁部落</title>
                  <style>
                  div {
                    width:150px;
                    line-height:100px;
                    text-align:center;
                    background-color:rgba(125,255,158,0.5);
                  }
                  </style>
                  </head>
                  <body>
                  <div>蚂蚁部落</div>
                  </body>
                  </html>

                  上述代码设置div为半透明,它里面的文字透明度并未受到任何影响。

                  RGBA是RGB+A组合,RGB是红?#35780;叮珹是透明度(值介于0-1之间,0表示完全透明,1表示不透明)。

                  在CSS3还有HSLA颜色表示法,它与RGBA类似,通过?#37096;?#20197;实现设置元素透明度效果,文本不受影响。

                  关于更多颜色知识可以参阅CSS颜色值类型一章节。


                  鲜花

                  握手

                  雷人

                  路过

                  鸡蛋

                  最新评论

                  返回顶部
                1. <var id="zvtmq"></var>
                    <tt id="zvtmq"><pre id="zvtmq"></pre></tt>

                    <font id="zvtmq"></font>

                    <tt id="zvtmq"></tt>

                      <var id="zvtmq"></var>
                      <mark id="zvtmq"><pre id="zvtmq"><td id="zvtmq"></td></pre></mark>

                      1. 
                        

                        <var id="zvtmq"><object id="zvtmq"><noscript id="zvtmq"></noscript></object></var><label id="zvtmq"><button id="zvtmq"><address id="zvtmq"></address></button></label>

                          <tt id="zvtmq"><wbr id="zvtmq"></wbr></tt>
                          <strike id="zvtmq"><output id="zvtmq"></output></strike>

                        1. <del id="zvtmq"><wbr id="zvtmq"><meter id="zvtmq"></meter></wbr></del>

                        2. <small id="zvtmq"></small>

                          <code id="zvtmq"><rt id="zvtmq"></rt></code>
                        3. <listing id="zvtmq"><object id="zvtmq"></object></listing>

                                快乐10分破解如何计算
                              1. <var id="zvtmq"></var>
                                  <tt id="zvtmq"><pre id="zvtmq"></pre></tt>

                                  <font id="zvtmq"></font>

                                  <tt id="zvtmq"></tt>

                                    <var id="zvtmq"></var>
                                    <mark id="zvtmq"><pre id="zvtmq"><td id="zvtmq"></td></pre></mark>

                                    1. 
                                      

                                      <var id="zvtmq"><object id="zvtmq"><noscript id="zvtmq"></noscript></object></var><label id="zvtmq"><button id="zvtmq"><address id="zvtmq"></address></button></label>

                                        <tt id="zvtmq"><wbr id="zvtmq"></wbr></tt>
                                        <strike id="zvtmq"><output id="zvtmq"></output></strike>

                                      1. <del id="zvtmq"><wbr id="zvtmq"><meter id="zvtmq"></meter></wbr></del>

                                      2. <small id="zvtmq"></small>

                                        <code id="zvtmq"><rt id="zvtmq"></rt></code>
                                      3. <listing id="zvtmq"><object id="zvtmq"></object></listing>

                                            1. <var id="zvtmq"></var>
                                                <tt id="zvtmq"><pre id="zvtmq"></pre></tt>

                                                <font id="zvtmq"></font>

                                                <tt id="zvtmq"></tt>

                                                  <var id="zvtmq"></var>
                                                  <mark id="zvtmq"><pre id="zvtmq"><td id="zvtmq"></td></pre></mark>

                                                  1. 
                                                    

                                                    <var id="zvtmq"><object id="zvtmq"><noscript id="zvtmq"></noscript></object></var><label id="zvtmq"><button id="zvtmq"><address id="zvtmq"></address></button></label>

                                                      <tt id="zvtmq"><wbr id="zvtmq"></wbr></tt>
                                                      <strike id="zvtmq"><output id="zvtmq"></output></strike>

                                                    1. <del id="zvtmq"><wbr id="zvtmq"><meter id="zvtmq"></meter></wbr></del>

                                                    2. <small id="zvtmq"></small>

                                                      <code id="zvtmq"><rt id="zvtmq"></rt></code>
                                                    3. <listing id="zvtmq"><object id="zvtmq"></object></listing>

                                                            澳门永利赌场注册 河南快三遗漏号数据查询 彩摘牛彩网 安徽25选5最新开奖结果 360安全彩票中心 围棋人机大战 p3试机号历史上的今天 幸运28预测单双 白小姐特爆中特网 精准一尾中特 云南快乐10分前三组走势图 陕西11选5遗漏l 老快3遗漏号36o官网 新用户注册送2元彩票 河南十一选五单注多少钱