css3实现毛玻璃效果

最新推荐文章于 2021-06-16 14:24:35 发布

sunddy_x

最新推荐文章于 2021-06-16 14:24:35 发布

阅读量1.2k

点赞数 2

分类专栏： css

本文链接：https://blog.youkuaiyun.com/sunddy_x/article/details/117323542

版权

backdrop-filter CSS 模糊效果过渡动画滤镜

关键词由优快云通过智能技术生成

css 专栏收录该内容

6 篇文章

订阅专栏

backdrop-filter属性允许我们对元素后面的内容进行过滤，完整代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			.image {
				position: relative;
				width: 40%;
			}

			.image__img {
				display: block;
				width: 100%;
				height: 100%;
				background-size: cover;
			}

			.image__overlay {
				position: absolute;
				top: 10%;
				left: 10%;
				width: 80%;
				height: 80%;
				border-radius: 10px;
				color: #ffffff;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
			}

			.image__overlay--blur {
				backdrop-filter: blur(10px);
			}
		</style>
	</head>
	<body>
		<div class="image">
			<img class="image__img" src="./img/lemon.jpg" alt="lemon">
			<div class="image__overlay image__overlay--blur">
				<div>Lemon</div>
			</div>
		</div>
	</body>
</html>

滤镜	释义
blur	模糊
brightness	亮度
contrast	对比度
drop-shadow	投影
grayscale	灰度
hue-rotate	色调变化
invert	反相
opacity	透明度
saturate	饱和度
sepia	褐色

补充：添加鼠标悬停显示毛玻璃，通过transition过渡实现，修改 image__overlay类样式并添加image__overlay:hover样式，代码如下：

.image__overlay {
	position: absolute;
	top: 10%;
	left: 10%;
	width: 80%;
	height: 80%;
	border-radius: 10px;
	color: #ffffff;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	transition: opacity 0.5s;
	opacity: 0;
}
			
.image__overlay:hover {
	opacity: 1;
}