CSS3 视觉效果 - filter 属性

核心知识点讲解

什么是 filter 属性？

filter 属性是 CSS3 中的一个强大属性，用于对元素应用各种视觉效果，如模糊、亮度、对比度、灰度、色相旋转、反转、饱和度、sepia 等。它可以用于图片、文本、背景等元素，创建出各种独特的视觉效果。

语法

filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();

取值

取值 描述
none 默认值，不应用任何滤镜效果。
blur(px) 对元素应用高斯模糊效果，值越大，模糊效果越明显。
brightness(%) 调整元素的亮度，值为 100% 时保持原始亮度，值大于 100% 时变亮，值小于 100% 时变暗。
contrast(%) 调整元素的对比度，值为 100% 时保持原始对比度，值大于 100% 时对比度增加，值小于 100% 时对比度降低。
drop-shadow(h-shadow v-shadow blur spread color) 对元素应用阴影效果，参数与 box-shadow 类似。
grayscale(%) 将元素转换为灰度图像，值为 100% 时完全灰度，值为 0% 时保持原始颜色。
hue-rotate(deg) 对元素的色相进行旋转，值为 0deg 时保持原始色相，值越大，色相旋转角度越大。
invert(%) 反转元素的颜色，值为 100% 时完全反转，值为 0% 时保持原始颜色。
opacity(%) 调整元素的透明度，值为 100% 时完全不透明，值为 0% 时完全透明。
saturate(%) 调整元素的饱和度，值为 100% 时保持原始饱和度，值大于 100% 时饱和度增加，值小于 100% 时饱和度降低。
sepia(%) 将元素转换为棕褐色调，值为 100% 时完全棕褐色，值为 0% 时保持原始颜色。
url() 引用 SVG 滤镜定义。

作用

filter 属性主要用于以下场景：

  1. 图片处理：对图片应用各种滤镜效果，如模糊、灰度、sepia 等。
  2. 视觉效果：创建阴影、发光、模糊等视觉效果。
  3. 交互反馈：在用户交互时（如悬停）应用滤镜效果，提供视觉反馈。
  4. 主题设计：通过调整亮度、对比度、色相等，创建特定的主题风格。
  5. 创意设计：组合使用多种滤镜效果，创建独特的视觉效果。

注意事项

  1. filter 属性可能会影响元素的性能，特别是当应用复杂的滤镜效果或在大量元素上使用时。
  2. 对于某些浏览器，可能需要添加浏览器前缀（如 -webkit-filter）以确保兼容性。
  3. filter 属性可以应用于任何元素，包括图片、文本、背景等。
  4. 多个滤镜效果可以组合使用，用空格分隔。
  5. 当 filter 属性应用于容器元素时，它会影响容器内的所有子元素。
  6. filter 属性中的 opacity 与 CSS 中的 opacity 属性类似，但 filter: opacity() 可以与其他滤镜效果组合使用。

实用案例分析

案例 1：基本滤镜效果展示

HTML 结构：

<div class="filter-container">
  <div class="filter-item">
    <img src="https://via.placeholder.com/200x200/3498db/ffffff?text=Original" alt="Original">
    <p>Original</p>
  </div>
  <div class="filter-item blur">
    <img src="https://via.placeholder.com/200x200/3498db/ffffff?text=Blur" alt="Blur">
    <p>Blur</p>
  </div>
  <div class="filter-item brightness">
    <img src="https://via.placeholder.com/200x200/3498db/ffffff?text=Brightness" alt="Brightness">
    <p>Brightness</p>
  </div>
  <div class="filter-item contrast">
    <img src="https://via.placeholder.com/200x200/3498db/ffffff?text=Contrast" alt="Contrast">
    <p>Contrast</p>
  </div>
  <div class="filter-item grayscale">
    <img src="https://via.placeholder.com/200x200/3498db/ffffff?text=Grayscale" alt="Grayscale">
    <p>Grayscale</p>
  </div>
  <div class="filter-item sepia">
    <img src="https://via.placeholder.com/200x200/3498db/ffffff?text=Sepia" alt="Sepia">
    <p>Sepia</p>
  </div>
</div>

CSS 样式：

.filter-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  padding: 20px;
  justify-content: center;
}

.filter-item {
  text-align: center;
  width: 200px;
}

.filter-item img {
  width: 100%;
  height: 200px;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.filter-item p {
  margin-top: 10px;
  font-size: 14px;
  color: #333;
}

.filter-item.blur img {
  filter: blur(5px);
}

.filter-item.brightness img {
  filter: brightness(150%);
}

.filter-item.contrast img {
  filter: contrast(200%);
}

.filter-item.grayscale img {
  filter: grayscale(100%);
}

.filter-item.sepia img {
  filter: sepia(100%);
}

效果说明：

  • 展示了原始图片和应用了不同滤镜效果的图片对比
  • 包括模糊、亮度、对比度、灰度和 sepia 效果
  • 每个图片下方都有对应的滤镜名称

案例 2：滤镜组合效果

HTML 结构：

<div class="filter-combination">
  <div class="filter-item original">
    <img src="https://via.placeholder.com/300x200/3498db/ffffff?text=Original" alt="Original">
    <p>Original</p>
  </div>
  <div class="filter-item combination-1">
    <img src="https://via.placeholder.com/300x200/3498db/ffffff?text=Combination+1" alt="Combination 1">
    <p>Blur + Brightness + Contrast</p>
  </div>
  <div class="filter-item combination-2">
    <img src="https://via.placeholder.com/300x200/3498db/ffffff?text=Combination+2" alt="Combination 2">
    <p>Grayscale + Hue-rotate + Saturate</p>
  </div>
  <div class="filter-item combination-3">
    <img src="https://via.placeholder.com/300x200/3498db/ffffff?text=Combination+3" alt="Combination 3">
    <p>Invert + Sepia + Contrast</p>
  </div>
</div>

CSS 样式：

.filter-combination {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  padding: 20px;
  justify-content: center;
}

.filter-item {
  text-align: center;
  width: 300px;
}

.filter-item img {
  width: 100%;
  height: 200px;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.filter-item p {
  margin-top: 10px;
  font-size: 14px;
  color: #333;
  text-align: center;
}

.filter-item.combination-1 img {
  filter: blur(2px) brightness(120%) contrast(150%);
}

.filter-item.combination-2 img {
  filter: grayscale(50%) hue-rotate(90deg) saturate(200%);
}

.filter-item.combination-3 img {
  filter: invert(100%) sepia(100%) contrast(150%);
}

效果说明：

  • 展示了原始图片和应用了不同组合滤镜效果的图片对比
  • 组合 1：模糊 + 亮度 + 对比度
  • 组合 2：灰度 + 色相旋转 + 饱和度
  • 组合 3：反转 + sepia + 对比度
  • 每个图片下方都有对应的滤镜组合说明

案例 3：图片悬停效果

HTML 结构：

<div class="hover-effects">
  <div class="hover-item">
    <img src="https://via.placeholder.com/300x200/3498db/ffffff?text=Hover+Effect+1" alt="Hover Effect 1">
    <div class="overlay">
      <h3>Blur Effect</h3>
      <p>Hover to see the effect</p>
    </div>
  </div>
  <div class="hover-item">
    <img src="https://via.placeholder.com/300x200/e74c3c/ffffff?text=Hover+Effect+2" alt="Hover Effect 2">
    <div class="overlay">
      <h3>Grayscale Effect</h3>
      <p>Hover to see the effect</p>
    </div>
  </div>
  <div class="hover-item">
    <img src="https://via.placeholder.com/300x200/2ecc71/ffffff?text=Hover+Effect+3" alt="Hover Effect 3">
    <div class="overlay">
      <h3>Sepia Effect</h3>
      <p>Hover to see the effect</p>
    </div>
  </div>
</div>

CSS 样式：

.hover-effects {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  padding: 20px;
  justify-content: center;
}

.hover-item {
  position: relative;
  width: 300px;
  height: 200px;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  cursor: pointer;
}

.hover-item img {
  width: 100%;
  height: 100%;
  transition: all 0.5s ease;
}

.hover-item .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: all 0.5s ease;
}

.hover-item .overlay h3 {
  margin: 0 0 10px 0;
  font-size: 18px;
}

.hover-item .overlay p {
  margin: 0;
  font-size: 14px;
}

.hover-item:hover img {
  transform: scale(1.1);
}

.hover-item:hover .overlay {
  opacity: 1;
}

.hover-item:nth-child(1):hover img {
  filter: blur(5px);
}

.hover-item:nth-child(2):hover img {
  filter: grayscale(100%);
}

.hover-item:nth-child(3):hover img {
  filter: sepia(100%);
}

效果说明：

  • 展示了图片悬停效果，当鼠标悬停在图片上时，会应用不同的滤镜效果
  • 第一个图片：悬停时应用模糊效果
  • 第二个图片：悬停时应用灰度效果
  • 第三个图片：悬停时应用 sepia 效果
  • 同时，图片会有缩放效果，并且显示叠加层

代码示例

完整示例：图片滤镜效果展示

HTML 结构：

<div class="filter-gallery">
  <h2>CSS Filter Effects Gallery</h2>
  <div class="filter-grid">
    <div class="filter-card">
      <img src="https://via.placeholder.com/250x200/3498db/ffffff?text=Blur" alt="Blur">
      <div class="filter-info">
        <h3>Blur</h3>
        <p>filter: blur(5px)</p>
      </div>
    </div>
    <div class="filter-card">
      <img src="https://via.placeholder.com/250x200/e74c3c/ffffff?text=Brightness" alt="Brightness">
      <div class="filter-info">
        <h3>Brightness</h3>
        <p>filter: brightness(150%)</p>
      </div>
    </div>
    <div class="filter-card">
      <img src="https://via.placeholder.com/250x200/2ecc71/ffffff?text=Contrast" alt="Contrast">
      <div class="filter-info">
        <h3>Contrast</h3>
        <p>filter: contrast(200%)</p>
      </div>
    </div>
    <div class="filter-card">
      <img src="https://via.placeholder.com/250x200/9b59b6/ffffff?text=Drop+Shadow" alt="Drop Shadow">
      <div class="filter-info">
        <h3>Drop Shadow</h3>
        <p>filter: drop-shadow(5px 5px 5px rgba(0,0,0,0.5))</p>
      </div>
    </div>
    <div class="filter-card">
      <img src="https://via.placeholder.com/250x200/f1c40f/ffffff?text=Grayscale" alt="Grayscale">
      <div class="filter-info">
        <h3>Grayscale</h3>
        <p>filter: grayscale(100%)</p>
      </div>
    </div>
    <div class="filter-card">
      <img src="https://via.placeholder.com/250x200/e67e22/ffffff?text=Hue+Rotate" alt="Hue Rotate">
      <div class="filter-info">
        <h3>Hue Rotate</h3>
        <p>filter: hue-rotate(90deg)</p>
      </div>
    </div>
    <div class="filter-card">
      <img src="https://via.placeholder.com/250x200/1abc9c/ffffff?text=Invert" alt="Invert">
      <div class="filter-info">
        <h3>Invert</h3>
        <p>filter: invert(100%)</p>
      </div>
    </div>
    <div class="filter-card">
      <img src="https://via.placeholder.com/250x200/34495e/ffffff?text=Opacity" alt="Opacity">
      <div class="filter-info">
        <h3>Opacity</h3>
        <p>filter: opacity(50%)</p>
      </div>
    </div>
    <div class="filter-card">
      <img src="https://via.placeholder.com/250x200/95a5a6/ffffff?text=Saturate" alt="Saturate">
      <div class="filter-info">
        <h3>Saturate</h3>
        <p>filter: saturate(200%)</p>
      </div>
    </div>
    <div class="filter-card">
      <img src="https://via.placeholder.com/250x200/3498db/ffffff?text=Sepia" alt="Sepia">
      <div class="filter-info">
        <h3>Sepia</h3>
        <p>filter: sepia(100%)</p>
      </div>
    </div>
    <div class="filter-card">
      <img src="https://via.placeholder.com/250x200/e74c3c/ffffff?text=Combination" alt="Combination">
      <div class="filter-info">
        <h3>Combination</h3>
        <p>filter: blur(2px) brightness(120%) contrast(150%)</p>
      </div>
    </div>
    <div class="filter-card">
      <img src="https://via.placeholder.com/250x200/2ecc71/ffffff?text=No+Filter" alt="No Filter">
      <div class="filter-info">
        <h3>No Filter</h3>
        <p>filter: none</p>
      </div>
    </div>
  </div>
</div>

CSS 样式：

.filter-gallery {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.filter-gallery h2 {
  text-align: center;
  margin-bottom: 30px;
  color: #333;
}

.filter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
}

.filter-card {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.filter-card:hover {
  transform: translateY(-5px);
}

.filter-card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.filter-card:nth-child(1) img {
  filter: blur(5px);
}

.filter-card:nth-child(2) img {
  filter: brightness(150%);
}

.filter-card:nth-child(3) img {
  filter: contrast(200%);
}

.filter-card:nth-child(4) img {
  filter: drop-shadow(5px 5px 5px rgba(0,0,0,0.5));
}

.filter-card:nth-child(5) img {
  filter: grayscale(100%);
}

.filter-card:nth-child(6) img {
  filter: hue-rotate(90deg);
}

.filter-card:nth-child(7) img {
  filter: invert(100%);
}

.filter-card:nth-child(8) img {
  filter: opacity(50%);
}

.filter-card:nth-child(9) img {
  filter: saturate(200%);
}

.filter-card:nth-child(10) img {
  filter: sepia(100%);
}

.filter-card:nth-child(11) img {
  filter: blur(2px) brightness(120%) contrast(150%);
}

.filter-info {
  padding: 15px;
  background-color: white;
}

.filter-info h3 {
  margin: 0 0 10px 0;
  font-size: 16px;
  color: #333;
}

.filter-info p {
  margin: 0;
  font-size: 12px;
  color: #666;
  font-family: monospace;
}

效果说明：

  • 展示了一个图片滤镜效果画廊，包含了各种滤镜效果的示例
  • 每个卡片展示了一种滤镜效果，并在下方显示了对应的 CSS 代码
  • 当鼠标悬停在卡片上时，卡片会有轻微的上浮效果
  • 滤镜效果包括：模糊、亮度、对比度、阴影、灰度、色相旋转、反转、透明度、饱和度、sepia 和组合效果

总结

filter 属性是 CSS3 中的一个强大属性，用于对元素应用各种视觉效果，如模糊、亮度、对比度、灰度、色相旋转、反转、饱和度、sepia 等。通过合理使用 filter 属性，可以创建出各种独特的视觉效果，增强网页的视觉体验。

核心要点：

  1. filter 属性可以应用于任何元素，包括图片、文本、背景等。
  2. 多个滤镜效果可以组合使用，用空格分隔。
  3. filter 属性可能会影响元素的性能，特别是当应用复杂的滤镜效果或在大量元素上使用时。
  4. 对于某些浏览器，可能需要添加浏览器前缀（如 -webkit-filter）以确保兼容性。
  5. filter 属性中的 opacity 与 CSS 中的 opacity 属性类似，但 filter: opacity() 可以与其他滤镜效果组合使用。

通过掌握 filter 属性的用法，可以创建出更加丰富、独特的视觉效果，提升网页的设计质量和用户体验。

« 上一篇 CSS3 变换 - backface-visibility 属性 下一篇 » CSS3 视觉效果 - mix-blend-mode 属性
↑