HTML中div设置透明度方法是啥什么，怎样用？

这篇文章给大家分享的是HTML中div设置透明度方法。下文主要介绍了两种方法，文中的示例代码介绍得很详细，对新手学习HTML有一定的帮助，需要的朋友可以参考，接下来就跟随小编一起了解看看吧。

本教程操作环境：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、使用opacity属性设置，透明度值越小，越透明。

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

}

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

}

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

}
    

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

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

}

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

}
    

以上就是HTML中div设置透明度的方法，上述方法和示例具有一定的参考价值，有需要的朋友可以了解看看，希望对大家学习div设置透明度有帮助，想要了解更多可以继续浏览网络其他相关的文章。

文本转载自PHP中文网

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！