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

计算机软件程序设计

已于 2024-10-13 09:44:50 修改

阅读量3.1k

点赞数 19

分类专栏：知识科普文章标签： css

于 2024-10-13 09:41:28 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_42736657/article/details/142894144

版权

知识科普专栏收录该内容

43 篇文章

订阅专栏

【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%) 滤镜，将图像转换为灰度图像。