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,我们将及时处理。
微信扫码关注
更新实时通知