• 技术文章 >web前端 >html教程

    html怎么设置div的透明度

    青灯夜游青灯夜游2021-12-13 15:28:59原创1174

    html设置div透明度的方法:1、利用opacity属性,只需要给div元素添加“opacity: 透明度值;”样式即可;2、利用filter属性,只需要给div元素添加“filter:opacity(透明度值);”样式即可。

    本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

    html设置div的透明度

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<style>
    			.box1{
    				width: 300px;
    				height: 200px;
    				background-color: yellow;
    			}
    			.box2{
    				width: 100px;
    				height: 100px;
    				background-color: green;
    			}
    		</style>
    	</head>
    	<body>
    		<div class="box1">
    			<div class="box2"></div>
    		</div>
    	</body>
    </html>

    1.png

    1、使用opacity属性设置,透明度值越小,越透明。

    .box2{
    	width: 100px;
    	height: 100px;
    	background-color: green;
    	opacity: 0.8;
    }

    3.png

    .box2{
    	width: 100px;
    	height: 100px;
    	background-color: green;
    	opacity: 0.5;
    }

    2.png

    .box2{
    	width: 100px;
    	height: 100px;
    	background-color: green;
    	opacity: 0.2;
    }

    4.png

    2、使用filter:opacity(透明度值);,透明度值越小,越透明。

    .box2{
    	width: 100px;
    	height: 100px;
    	background-color: green;
    	filter:opacity(0.5);
    }

    5.png

    .box2{
    	width: 100px;
    	height: 100px;
    	background-color: green;
    	filter:opacity(0.1);
    }

    6.png

    推荐教程:《html视频教程

    以上就是html怎么设置div的透明度的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:html 透明度
    上一篇:html怎么设置div高度 下一篇:html怎么设置a标签位置
    Web大前端开发直播班

    相关文章推荐

    • html怎么让文字对齐• html怎么禁止文字选择• js怎么设置html title标题• 什么是html5设备兼容特性• html5中什么元素用于描述文档

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网