当前位置：首页 > news >正文

关于CSS中毛玻璃和滤镜使用总结

news 文章来源：https://blog.csdn.net/weixin_42736657/article/details/142894144 2025/5/11 1:47:55

【1】毛玻璃

毛玻璃效果（也称为磨砂玻璃效果）可以通过 CSS 的 backdrop-filter 属性来实现。这个属性允许你在背景上应用各种滤镜效果，从而创建出类似磨砂玻璃的效果。这种效果通常用于创建半透明背景下的模糊效果，使得背景图像或颜色变得柔和，同时保持前景内容的清晰可见。

示例代码

HTML 结构

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS 毛玻璃效果</title><link rel="stylesheet" href="styles.css">
</head>
<body><div class="glass-effect"><h1>毛玻璃效果</h1><p>这是一个使用 CSS 创建的毛玻璃效果。</p></div>
</body>
</html>

CSS 样式

body, html {height: 100%;margin: 0;font-family: Arial, sans-serif;background: url('https://example.com/your-background-image.jpg') no-repeat center center fixed;background-size: cover;
}.glass-effect {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);padding: 20px;background-color: rgba(255, 255, 255, 0.2); /* 半透明背景 */backdrop-filter: blur(10px); /* 创建毛玻璃效果 */border-radius: 10px;color: #fff;box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);max-width: 600px;text-align: center;
}

解释

背景设置：
- background: url('https://example.com/your-background-image.jpg') no-repeat center center fixed;：设置背景图像，并使其固定在页面中央。
- background-size: cover;：确保背景图像覆盖整个页面。
毛玻璃效果：
- position: absolute;：将 .glass-effect 定位为绝对定位。
- top: 50%; left: 50%; transform: translate(-50%, -50%);：将 .glass-effect 居中显示在页面中间。
- background-color: rgba(255, 255, 255, 0.2);：设置半透明的白色背景。
- backdrop-filter: blur(10px);：应用模糊滤镜，创建毛玻璃效果。
- border-radius: 10px;：添加圆角。
- color: #fff;：设置文本颜色为白色。
- box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);：添加阴影效果，增强立体感。
- max-width: 600px;：设置最大宽度，确保内容不会过于扩展。
- text-align: center;：使文本居中对齐。

兼容性

backdrop-filter 属性在现代浏览器中得到了广泛支持，但在一些旧版本的浏览器中可能不被支持。因此，建议在使用时进行兼容性测试，确保在不同浏览器中的表现一致。

备用方案

如果浏览器不支持 backdrop-filter，可以考虑使用备用方案，例如使用 filter: blur(10px); 对背景图像进行模糊处理，但这会影响整个元素的内容，而不是仅对背景进行模糊处理。

示例效果

背景图像通过毛玻璃效果变得模糊，但前景内容（标题和段落）保持清晰可见。
整个 .glass-effect 元素具有半透明的背景和圆角，看起来像是透过毛玻璃看到的效果。

希望这个示例能帮助你实现所需的毛玻璃效果！如果你有任何进一步的问题或需要更多的帮助，请随时告诉我。

【2】滤镜

CSS 滤镜（CSS Filters）提供了一种简单的方式来对元素应用各种视觉效果，类似于图像编辑软件中的滤镜效果。这些滤镜可以应用于任何 HTML 元素，包括图片、视频、文本等。CSS 滤镜使用 filter 属性来定义。

常见的 CSS 滤镜

以下是一些常用的 CSS 滤镜及其效果：

blur()：使元素变得模糊。
```
filter: blur(5px);
```
brightness()：调整元素的亮度。
```
filter: brightness(50%);
```
contrast()：调整元素的对比度。
```
filter: contrast(200%);
```
grayscale()：将元素转换为灰度图像。
```
filter: grayscale(100%);
```
hue-rotate()：旋转元素的颜色色调。
```
filter: hue-rotate(90deg);
```
opacity()：调整元素的透明度。
```
filter: opacity(50%);
```
saturate()：调整元素的饱和度。
```
filter: saturate(50%);
```
sepia()：将元素转换为棕褐色调。
```
filter: sepia(100%);
```

drop-shadow()：为元素添加阴影效果。

filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.5));

组合滤镜

你可以将多个滤镜组合在一起，通过空格分隔每个滤镜效果。

filter: blur(5px) brightness(70%) grayscale(50%);

示例代码

HTML 结构

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS 滤镜示例</title><link rel="stylesheet" href="styles.css">
</head>
<body><div class="image-container"><img src="https://example.com/your-image.jpg" alt="示例图像" class="original"><img src="https://example.com/your-image.jpg" alt="示例图像" class="blurred"><img src="https://example.com/your-image.jpg" alt="示例图像" class="brightened"><img src="https://example.com/your-image.jpg" alt="示例图像" class="grayscaled"></div>
</body>
</html>

CSS 样式

body {font-family: Arial, sans-serif;display: flex;justify-content: center;align-items: center;height: 100vh;margin: 0;background-color: #f0f0f0;
}.image-container {display: flex;gap: 20px;
}.original {filter: none;
}.blurred {filter: blur(5px);
}.brightened {filter: brightness(150%);
}.grayscaled {filter: grayscale(100%);
}

解释

HTML 结构：
- img 元素用于显示图像。
- 每个图像都有一个不同的类名，用于应用不同的滤镜效果。
CSS 样式：
- body：设置页面的基本样式，使内容居中显示。
- .image-container：使用 Flexbox 布局，使图像水平排列并有一定的间距。
- .original：没有应用任何滤镜。
- .blurred：应用 blur(5px) 滤镜，使图像变得模糊。
- .brightened：应用 brightness(150%) 滤镜，增加图像的亮度。
- .grayscaled：应用 grayscale(100%) 滤镜，将图像转换为灰度图像。

兼容性

CSS 滤镜在现代浏览器中得到了广泛支持，但在一些旧版本的浏览器中可能不被支持。建议在使用时进行兼容性测试，确保在不同浏览器中的表现一致。

备用方案

如果浏览器不支持 filter 属性，可以考虑使用备用方案，例如使用 SVG 滤镜或 JavaScript 库来实现类似的效果。

希望这些示例和解释能帮助你更好地理解和使用 CSS 滤镜！如果你有任何进一步的问题或需要更多的帮助，请随时告诉我。

【1】毛玻璃

示例代码

HTML 结构

CSS 样式

解释

兼容性

备用方案

示例效果

【2】滤镜

常见的 CSS 滤镜

组合滤镜

示例代码

HTML 结构

CSS 样式

解释

兼容性

备用方案

相关文章：