div上添加遮罩层用于提示信息

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/skye_95/article/details/82728572

实现重点:背景div设置属性position: relative;,遮罩层div设置属性position: absolute;,背景属性background,属性bottom: 0;让遮罩层div在背景div里面。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.bacimg{
				width: 400px;
				height: 300px;
				position: relative;
			}
			.bacimg img{
				width: 400px;
				height: 300px;
			}
			.cover{
				width: 100%;
				position: absolute;
				background: rgba(0,0,0,0.6);
				color: #fff;
				opacity: 0.6;
				bottom: 0;
			}
		</style>
	</head>
	<body>
		<div class="bacimg">
			<img src="../../img/ad2.jpg" />
			<div class="cover">
				aaaa
			</div>
		</div>
	</body>
</html>

结果图:

猜你喜欢

转载自blog.csdn.net/skye_95/article/details/82728572