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
本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。
微信扫码关注
更新实时通知