CSS设置背景透明效果

CSS设置背景透明效果CSS设置背景透明效果设置背景透明效果有两种方法:使用opacity属性定义透明度,范围0-1,0表示完全透明,1表示不透明,优点:可以在背景图片以及背景颜色上使用。缺点:会把设置div及其子元素都显示透明。<divclass=”div1″> <p>透明度测试</p></div>.div1{ display:inline-block; margin:10px; width:200px; height:200px; colo

CSS设置背景透明效果

设置背景透明效果有两种方法:

  • 使用opacity属性定义透明度,范围0-1,0表示完全透明,1表示不透明,优点:可以在背景图片以及背景颜色上使用。缺点:会把设置div及其子元素都显示透明。
<div class="div1">
	<p>透明度测试</p>
</div>
.div1{ 
   
	display: inline-block;
	margin: 10px;
	width: 200px;
	height: 200px;
	color: #FFF;
	background:url(img/middle-top-bg.png) no-repeat;
	/* 填充整个容器 */
	background-size: 100% 100%;
	opacity: 0.3;
}

结果:
在这里插入图片描述

  • 使用rgba(red, green, blue, alpha)设置透明度,优点:只透明背景颜色。缺点:不能设置背景图片。
<div class="div2">
	<p>透明度测试</p>
</div>

.div2{ 
   
	display: inline-block;
	margin: 10px;
	width: 200px;
	height: 200px;
	color: #FFF;
	background-color: rgba(150,250,27,0.2);
}

结果:
在这里插入图片描述

  • 如果想使用背景图片,又想设置背景透明,但是内容不透明,可以当如设置一个div作为背景,然后使该div透明。优点:既可使用在背景图片又可以使用在背景颜色上。缺点:设计多个div,比较麻烦。
<div class="div3">
	<div class="bg"></div>
	<div class="container">
		<p>透明度测试</p>
	</div>
</div>
div3 { 
   
	display: inline-block;
	margin: 10px;
	width: 200px;
	height: 200px;
	color: #FFF;
}
.bg{ 
   
	position: absolute;
	background: url(img/middle-top-bg.png) no-repeat;
	/* 填充整个容器 */
	background-size: 100% 100%;
	opacity: 0.3;
}
.container{ 
   
	position: relative;
}

结果:
在这里插入图片描述

今天的文章CSS设置背景透明效果分享到此就结束了,感谢您的阅读。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/7030.html

(0)
编程小号编程小号

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注