当前第2页 返回上一页
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 | <!DOCTYPE html>
< html >
< meta charset = "UTF-8" >
< head >
< style >
.demo{
width: 450px;
height: 200px;
background-color: red;
margin: 10px 0px;
}
</ style >
< script >
function ChangeOpacity(x)
{
// 返回被选选项的文本
var opacity=x.options[x.selectedIndex].text;
var el=document.getElementById("box");
if (el.style.opacity!==undefined)
{el.style.opacity=opacity;}
else
{alert("Your browser doesn't support this example!");}
}
</ script >
</ head >
< body >
< p id = "p1" >请从下面的例子中选择一个值,以改变此元素的不透明度。</ p >
< div id = "box" class = "demo" ></ div >
< select onchange = "ChangeOpacity(this);" size = "5" >
< option />0
< option />0.2
< option />0.5
< option />0.8
< option selected = "selected" />1
</ select >
</ body >
|
效果图:
以上就是本篇文章的全部内容,希望能对大家的学习有所帮助。更多精彩内容大家可以关注php中文网相关教程栏目!!!
以上就是opacity属性怎么用的详细内容,更多文章请关注木庄网络博客!
返回前面的内容
相关阅读 >>
详解css3+svg滤镜实现不规则边框的方法
如何解决css3 media不起作用的问题
css3怎么将滚动条隐藏
css3绘制一个圆圆的loading转圈动画实例分享
不支持css3的浏览器有哪些
css3怎么让文字垂直居中显示
css3新特性有哪些
箭头用css3怎么写
div怎样设置边框和透明度样式
border-image-width属性怎么用
更多相关阅读请进入《opacity属性》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » opacity属性怎么用