css3实现毛玻璃效果_css3毛玻璃效果-CSDN博客

本文链接：https://blog.csdn.net/sunddy_x/article/details/117323542

该博客介绍了如何使用CSS的backdrop-filter属性为元素背后的内容添加模糊效果，例如在图片上创建一个带有模糊背景的覆盖层。示例代码展示了如何创建一个带有模糊效果的图片叠加层，并在鼠标悬停时通过transition实现透明度的平滑过渡，从而达到视觉上的毛玻璃效果。此外，文章还列举了backdrop-filter支持的各种滤镜效果，如模糊、亮度、对比度等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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;
}