学习 filter属性 和 常用方式

757 阅读5分钟

这是我参与更文挑战的第3天,活动详情查看: 更文挑战

filter属性

filter CSS属性 将模糊或颜色偏移等图形效果应用于元素。滤镜通常用于调整图像,背景和边框的渲染。

原图

image.png

blur(px) 模糊

函数将高斯模糊应用于输入图像。值越大越模糊,默认是0,不设置模糊。单位是px,不接受百分比值。

.img {
  margin-left: 50px;
  filter: blur(5px);
}

image.png

brightness(%) 亮度

函数将线性乘法器应用于输入图像,使其变暗或变亮。值为 0% 生成全黑图像。值为 100% 保持不变。值超过100%也是可以的,图像会比原来更亮。如果没有设定值,默认是1。可以使用百分比也可以使用数表示。

.img1 {
  margin-left: 50px;
  filter: brightness(0%);
}
.img2 {
  margin-left: 50px;
  filter: brightness(50%);
}
.img3 {
  margin-left: 50px;
  filter: brightness(1);
}
.img4 {
  margin-left: 50px;
  filter: brightness(2);
}

image.png

contrast(%) 对比度

调整输入图像的对比度。值是 0% 的话,图像变灰。值是 100%,图像不变。值可以超过100%,意味着会运用更低的对比。若没有设置值,默认是1。可以使用百分比也可以使用数表示。

.img1 {
  margin-left: 50px;
  filter: contrast(0%);
}
.img2 {
  margin-left: 50px;
  filter: contrast(50%);
}
.img3 {
  margin-left: 50px;
  filter: contrast(1);
}
.img4 {
  margin-left: 50px;
  filter: contrast(2);
}

image.png

drop-shadow(x偏移,y偏移,模糊范围,颜色) 投影

x偏移,y偏移 (必须)。这是设置阴影偏移量的两个 <length> 值。如果两个值都是 0, 则阴影出现在元素正后面。
模糊范围 (可选)。值越大,越模糊。阴影会变得更大更淡.不允许负值 若未设定,默认是0 。
颜色 (可选)。查看 <color> 了解该值可能的关键字和标记。若未设定,颜色值为浏览器默认颜色。

.img1 {
  margin-left: 50px;
  filter: drop-shadow(16px 16px);
}
.img2 {
  margin-left: 50px;
  filter: drop-shadow(16px 16px 10px);
}
.img3 {
  margin-left: 50px;
  filter: drop-shadow(16px 16px 10px black);
}
.img4 {
  margin-left: 50px;
  filter: drop-shadow(16px 16px 40px black);
}

image.png

grayscale(%) 灰度

将改变输入图像灰度。值为 100% 则完全转为灰度图像,值为 0% 图像无变化。值在0%到100%之间,则是效果的线性乘子。超过100% 和 100%效果相同。若未设置,值默认是0。可以使用百分比也可以使用数表示。

.img1 {
  margin-left: 50px;
  filter: grayscale(0%);
}
.img2 {
  margin-left: 50px;
  filter: grayscale(0.5);
}
.img3 {
  margin-left: 50px;
  filter: grayscale(100%);
}
.img4 {
  margin-left: 50px;
  filter: grayscale(2);
}

image.png

hue-rotate(deg) 色相旋转

给图像应用色相旋转。angle一值设定图像会被调整的色环角度值。值为0deg,则图像无变化。若值未设置,默认值是0deg。该值虽然没有最大值,超过360deg的值相当于又绕一圈。

    .img1 {
      margin-left: 50px;
      filter: hue-rotate(0deg);
    }
    .img2 {
      margin-left: 50px;
      filter: hue-rotate(180deg);
    }
    .img3 {
      margin-left: 50px;
      filter: hue-rotate(360deg);
    }
    .img4 {
      margin-left: 50px;
      filter: hue-rotate(450deg);
    }

image.png

invert(%) 反转图像

反转输入图像。amount 的值定义转换的比例。100% 的价值是完全反转。值为 0% 则图像无变化。值在 0% 和 100% 之间,则是效果的线性乘数。 若值未设置值,默认为 0。

    .img1 {
      margin-left: 50px;
      filter: invert(10%);
    }
    .img2 {
      margin-left: 50px;
      filter: invert(50%);
    }
    .img3 {
      margin-left: 50px;
      filter: invert(100%);
    }
    .img4 {
      margin-left: 50px;
      filter: invert(150%);
    }

image.png

opacity(%) 透明度

转化图像的透明程度。amount 的值定义转换的比例。值为 0% 则是完全透明,值为 100% 则图像无变化。 若值未设置,值默认是1。该函数与已有的 opacity 属性很相似。

.img1 {
  margin-left: 50px;
  filter: opacity(10%);
}
.img2 {
  margin-left: 50px;
  filter: opacity(50%);
}
.img3 {
  margin-left: 50px;
  filter: opacity(100%);
}
.img4 {
  margin-left: 50px;
  filter: opacity(150%);
}

image.png

saturate(%) 饱和度

函数转换图像饱和度。值为 0% 则是完全不饱和,值为 100% 则图像无变化。其他值是效果的线性乘数。超过 100% 则有更高的饱和度。 若未设置值,默认为 1。

.img1 {
  margin-left: 50px;
  filter: saturate(10%);
}
.img2 {
  margin-left: 50px;
  filter: saturate(50%);
}
.img3 {
  margin-left: 50px;
  filter: saturate(100%);
}
.img4 {
  margin-left: 50px;
  filter: saturate(150%);
}

image.png

sepia(%) 转换为深褐色

将图像转换为深褐色。值定义转换的比例。值为100%则完全是深褐色的,值为0%图像无变化。值在0%到100%之间,则是效果的线性乘子。若未设置,值默认是0;

    .img1 {
      margin-left: 50px;
      filter: sepia(10%);
    }
    .img2 {
      margin-left: 50px;
      filter: sepia(50%);
    }
    .img3 {
      margin-left: 50px;
      filter: sepia(1);
    }
    .img4 {
      margin-left: 50px;
      filter: sepia(2);
    }

image.png

url() 获取指向SVG过滤器的URI

该文件设置了 一个SVG滤镜,且可以包含一个锚点来指定一个具体的滤镜元素。

<!DOCTYPE html>
<html lang="en">
  <style></style>
  <body>
    <svg width="230" height="120" xmlns="http://www.w3.org/2000/svg">
      <filter id="blurMe">
        <feGaussianBlur stdDeviation="5" />
      </filter>
      <circle cx="60" cy="60" r="50" fill="green" />
      <circle cx="170" cy="60" r="50" fill="green" filter="url(#blurMe)" />
    </svg>
  </body>
</html>

image.png

复合使用

可以同时对一个元素设置多种过滤样式。

.img1 {
  margin-left: 50px;
  filter: sepia(10%) opacity(10%);
}
.img2 {
  margin-left: 50px;
  filter: sepia(50%) opacity(30%);
}
.img3 {
  margin-left: 50px;
  filter: sepia(1) opacity(50%);
}
.img4 {
  margin-left: 50px;
  filter: sepia(2) opacity(100%);
}

image.png

常用方式

背景模糊

<!DOCTYPE html>
<html lang="en">
  <style>
    .home {
      width: 500px;
      height: 300px;
      margin: 20px auto;
      position: relative;
    }
    .home:after {
      content: '';
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
      background-image: url(./4.jpg);
      background-size: 100% 100%;
      filter: blur(5px);
      z-index: 2;
    }
    .div {
      font-size: 40px;
      background-color: bisque;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 200px;
      height: 100px;
      text-align: center;
      z-index: 3;
    }
  </style>
  <body>
    <div class="home">
      <div class="div">背景模糊</div>
    </div>
  </body>
</html>

image.png

  • 如果对父元素直接设置filter: blur(5px);子元素也会在模糊中。这里通过给伪类设置filter属性,然后使伪类覆盖在原背景上。这就实现了只有背景才模糊的效果。

背景局部清晰

<!DOCTYPE html>
<html lang="en">
  <style>
    .home {
      width: 500px;
      height: 500px;
      background: url(./4.jpg) no-repeat fixed;
      position: relative;
    }
    .home:after {
      content: '';
      width: 500px;
      height: 500px;
      position: absolute;
      left: 0;
      top: 0;
      background: inherit;
      filter: blur(5px);
      z-index: 1;
    }

    .div {
      position: absolute;
      left: 35%;
      top: 35%;
      width: 200px;
      height: 100px;
      text-align: center;
      font-size: 40px;
      background: inherit;
      z-index: 3;
    }
  </style>
  <body>
    <div class="home">
      <div class="div">局部清晰</div>
    </div>
  </body>
</html>

image.png

  • 模糊效果和背景模糊使用相同方式。这里主要是对背景background添加了fixed定位,让图片固定。修改div的位置来裁剪图片,展示部分内容。