CSS实现磨砂玻璃（毛玻璃）效果样式
要使用CSS实现磨砂玻璃(毛玻璃)效果，可以使用backdrop-filter属性。该属性可以为元素添加模糊效果，常用于调整图片或颜色背景的透明度，实现淡化或增强其中的视觉效果。
以下是一个简单的例子，展示如何使用backdrop-filter来实现模糊效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>磨砂玻璃效果</title>
<style>
.glass {
width: 300px;
height: 200px;
background-image: url('your-image.jpg'); /* 替换为你的图片路径 */
background-size: cover;
background-position: center;
border: 1px solid #000;
display: flex;
justify-content: center;
align-items: center;
backdrop-filter: blur(5px); /* 调整模糊半径 */
}
</style>
</head>
<body>
<div class="glass">
<!-- 内容 -->
</div>
</body>
</html>在这个例子中，.glass 类定义了一个模糊半径为5像素的磨砂玻璃效果。你可以将url('your-image.jpg')替换为你想要应用这种效果的图片。调整backdrop-filter属性中的blur()函数参数可以改变模糊的强度。
评论已关闭