CSS控制网页的背景透明度

最新推荐文章于 2024-08-22 16:10:15 发布

whiteAndBlackOfView

最新推荐文章于 2024-08-22 16:10:15 发布

阅读量1.5w

点赞数 3

分类专栏： HTML/CSS 文章标签： CSS 背景透明度

本文链接：https://blog.csdn.net/weixin_36755917/article/details/80550654

版权

HTML/CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1.实现方法（3种），以不透明度为50%为例

    ①CSS3的opacity:X
       X的取值范围：0~1
       如：opacity:0.5;
    ②CSS3的rgba(red,green,blue,alpha)
       alpha的取值范围：0~1
       如：background:rgba(255,255,255,0.5);
   ③IE专属滤镜filter:Alpha(opacity=X)
       X的取值范围：0~100

如：filter:Alpha(opacity=50)

2.调整布局模块的整体透明度

<!DOCTYPE html>
<html>
  <head>
        <meta charset="utf-8">
        <title>CSS3的opacity</title>
		<style>
			*{
				padding: 0;
				margin: 0;
			}
			body{
				padding: 50px;
				background: green;
			}
			.test{
				padding: 20px;
				background-color:#000000;
				opacity: 0.2;
			}
			.test p{
				color: #FFFFFF;
			}
		</style>
	</head>
	
	<body>    

		<div class="test">
			<p>背景透明，文字也透明</p>
		</div>

</html>

效果：

3.父元素的样式参数设置，不会改变子元素的样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>背景透明，文字不透明</title>
		<style>
		*{
			padding: 0;
			margin: 0;
		}

		body{
			padding: 25px;
			background: green;
		}

		.test{
			padding: 25px;
			background-color: rgba(0,0,0,0.5);
		}
		.test p{
			color: #FFFFFF;
		}
		
		<!-- .test{
			background-color:#000000;
			filter:Alpha(opacity=50);
			position:static; /* IE6、7、8只能设置position:static(默认属性) ，否则会导致子元素继承Alpha值 */
			*zoom:1; /* 激活IE6、7的haslayout属性，让它读懂Alpha */
		}
		.test p{
			position: relative;/* 设置子元素为相对定位，可让子元素不继承Alpha值 */
                        color：#FFFFFF;
		}  -->
	}

		</style>
	</head>
	<body>    

		<div class="demo">
			<p>背景透明，文字不透明</p>
		</div>
		
	</body>
</html>

效果：