1949啦网--小小 痛苦,是因为能力和欲望不匹配造成的

CSS透明度opacity详解

opacity

  opacity是CSS3中专门用来设置透明度的一个属性,opacity只能给整个元素设置一个透明度,并且其透明度直接会继承给其后代元素

  值: value | inherit

  value:默认值是1,可以取0-1的任意浮点数。其中,1表示完全不透明,0表示完全透明

  初始值: 1

  应用于: 所有元素

  继承性: 无

【兼容性】

  IE8-浏览器不支持opacity透明属性,可以使用其专用的滤镜来实现opacity透明属性的透明效果

  filter:alpha(opacity=透明值),该透明值是0-100之间的任意整数

<!DOCTYPE html>  <html>  	<head>  		<meta charset="UTF-8">  		<title></title>    <style>      ul {        margin: 0;        padding: 0;        list-style: none;      }        .l {        float: left;      }        .r {        float: right;      }        .con {        float: left;        width: 300px;        border: 2px solid black;        overflow: hidden;        padding: 10px;        border-radius: 10px;      }        .con li {        height: 30px;        line-height: 30px;        font-size: 24px;        text-align: left;        cursor: pointer;        margin: 4px;        overflow: hidden;      }        .con li input {        width: 100px;      }        .show {        float: left;        width: 300px;        height: 100px;        line-height: 100px;        font-size: 40px;        border: 4px solid black;        margin: 0 60px;        text-align: center;      }        .color {        width: 600px;        height: 80px;        line-height: 40px;        font-size: 16px;        font-weight: bold;        text-align: center;      }        .color input {        width: 100px;      }        #input,      #btn,      #reset {        font-size: 18px;      }      @media (max-width:700px) {        .box{width:100%;box-sizing: border-box;}        .show,.con{float:none;overflow:hidden;width:100%;box-sizing: border-box;margin:0;}        .show-body{width: 100%;display:block;box-sizing: border-box;}        .color{width: 100%;height:auto;line-height:30px;}        #input{width:130px;font-size:12px;}        .con dt{margin:0;}        .con dl{margin:0;width:100%;}        .con dl dd{float:left;width:18%;margin:1%;}        #conUl{width:100%;box-sizing: border-box;}        .con li {font-size:14px;}        .color{font-size:12px;}      }            </style>  </head>    <body>    <div style="overflow: hidden">      <ul class="con" id="con">        <li>          <span class="l">透明度:            <b></b>          </span>          <input class="r" type="range" min="0" max="1" step="0.01" value="1">        </li>      </ul>      <div class="show" id="show">测试文字透明度 例子01</div>    </div>      <div class="color">      <span>opacity为</span>      <input readonly id="input1" value="1"><br>      <span>filter:alpha为</span>      <input readonly id="input2" value="(opacity=100)">    </div>      <script>      var conChildren = con.children;      for (var i = 0; i < conChildren.length; i++) {        var oFocus = conChildren[i].getElementsByTagName('input')[0];        oFocus.onpropertychange = oFocus.oninput = oFocus.onchange = function () {          this.parentNode.getElementsByTagName('b')[0].innerHTML = this.value;          input1.value = conChildren[0].getElementsByTagName('input')[0].value;          input2.value = "(opacity=" + input1.value * 100 + ")";          show.style.cssText = "filter:alpha(opacity=" + input1.value * 100 + ");opacity: " + input1.value;        }        conChildren[i].onmouseover = function () {          this.style.color = "rgb(39,184,231)";        }        conChildren[i].onmouseout = function () {          this.style.color = "black";        }      }    </script>  </body>    </html>

原文链接:https://www.qiquanji.com/post/8846.html

本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。

微信扫码关注

更新实时通知

作者:xialibing 分类:网页教程 浏览: