CSS Filter 不影响子元素|极客教程

CSS Filter 不影响子元素

简介

CSS Filter 是一种非常强大的工具，它可以实现图像的特效处理、颜色调整等功能。但是在使用CSS Filter的时候，我们需要注意一个问题，就是CSS Filter是作用在元素本身上的，而不会影响到子元素。本文将详细介绍CSS Filter的使用方法，以及如何避免子元素受到影响。

CSS Filter 的基本语法

CSS Filter 通过filter属性来实现，其基本语法如下：

.element {
  filter: filtername(value);
}

其中，filtername是CSS Filter支持的滤镜名称，value是具体的参数值。

常用的CSS Filter的滤镜名称有：

blur：模糊效果
brightness：亮度
contrast：对比度
drop-shadow：阴影效果
grayscale：灰度
hue-rotate：色相旋转
invert：反色
opacity：透明度
saturate：饱和度
sepia：棕色效果

CSS Filter 不影响子元素

在使用CSS Filter时，需要注意的一点是，CSS Filter只作用在元素本身上，不会影响到子元素。这意味着，如果给父元素应用了CSS Filter，子元素不会受到影响。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Filter 不影响子元素</title>
  <style>
    .parent {
      filter: grayscale(100%);
    }
    .child {
      width: 100px;
      height: 100px;
      background-color: red;
    }
  </style>
</head>
<body>
  <div class="parent">
    <div class="child"></div>
  </div>
</body>
</html>

在上面的示例中，给父元素.parent应用了filter: grayscale(100%);，将其变成灰色。但是子元素.child仍然保持原始颜色，没有受到影响。

如何避免影响子元素

如果我们希望对父元素应用CSS Filter的同时，又想让子元素保持原始样式，可以使用以下方法：

方法一：使用伪元素

可以通过伪元素的方式来实现父元素应用CSS Filter，而不影响子元素。具体做法是给父元素添加一个伪元素，然后对伪元素应用CSS Filter。

.parent {
  position: relative;
}
.parent::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  filter: blur(5px);
}

方法二：使用背景图片

另一种方法是使用背景图片来模拟CSS Filter的效果，而不实际应用CSS Filter。

.parent {
  background: url('image.jpg') no-repeat center center / cover;
  position: relative;
}
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
}