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

最新推荐文章于 2020-04-26 13:05:25 发布

Skye Lin

最新推荐文章于 2020-04-26 13:05:25 发布

阅读量2.5k

点赞数

分类专栏： Java Web html 文章标签： html

本文链接：https://blog.csdn.net/skye_95/article/details/82728572

版权

html 同时被 2 个专栏收录

35 篇文章 3 订阅

订阅专栏

Java Web

27 篇文章 1 订阅

订阅专栏

实现重点：背景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>

结果图：