filter - 常用滤镜效果(毛玻璃、图片阴影、图片褪色)

文章目录

    • filter 属性
    • 滤镜算法函数
      • blur:高斯模糊
      • hue-rotate:色相环
      • contrast:对比度
      • grayscale:灰度
      • drop-shadow:图片阴影
    • 常见的滤镜效果
      • 图片内容轮廓阴影
      • 毛玻璃
      • 图片黑白
      • 调整图片色相和对比度
      • 使元素或文字变圆润

filter 属性

filter 属性为滤镜属性。
格式:filter: ;

什么是滤镜?
滤镜:将元素中的像素点通过一些算法计算后,转换成新的像素点。

它还有一个兄弟属性:drop-filter
区别在于,filter 表示让本元素像素点参与计算,drop-filter 表示将本元素下面盖着的元素参与计算。

滤镜算法函数

有什么样的算法函数,就有什么样的滤镜效果。而且滤镜函数不仅可以单独使用,还是组合使用。
像素点a -> 算法1 -> 算法2 -> 像素点b

blur:高斯模糊

  • blur(10px)

blur 为高斯模糊函数,算法为参考周围像素点颜色来计算当前像素点的颜色。10px 表示参考的范围半径。参考范围越大,自然也越模糊,所以 blur() 里面这个值越大,画面就越模糊。

hue-rotate:色相环

  • hue-rotate(45deg)

它可以调整像素点的色相,函数里面的角度,就是色相环上对应的颜色。

contrast:对比度

  • contrast(1.5)

默认值为 1,值越小表示颜色对比度越小。

grayscale:灰度

  • grayscale(1)

默认值为 0,当值为 1 的时候,网页就变黑白了。纪念日很常用。

drop-shadow:图片阴影

  • drop-shadow(10px, 10px, 10px, ragb(0,0,0,0.5);

这个函数有点类似于 box-shadow 属性。box-shadow 属性在元素的整个框后面创建一个矩形阴影,而 drop-shadow() 过滤器则是创建一个符合图像本身形状 (alpha 通道) 的阴影。

常见的滤镜效果

图片内容轮廓阴影

注意:这种效果一般使用的图片都是背景透明的 png 图片。
因为这样才能体现出阴影沿着图片内容的轮廓。如果不透明,图片内容就是一个矩形,那效果和 box-shadow 看起来一样了,都是生成一个矩形的阴影。

.img-drop-shadow {
  filter: drop-shadow(10px 10px 10px rgba(0, 0, 0, 0.5));
}
.img-box-shadow {
  box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5);
}

filter - 常用滤镜效果(毛玻璃、图片阴影、图片褪色)_第1张图片

毛玻璃

.ground-glass {
  height: 260px;
  width: 400px;
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: auto;
  border-bottom: 1px solid hsla(0, 0%, 100%, 0.4);
  border-left: 1px solid hsla(0, 0%, 100%, 0.4);
  border-radius: 20px;
  box-shadow: 10px -10px 20px rgba(0, 0, 0, 0.2), -10px 10px 20px hsla(0, 0%, 100%, 0.1);
  background-image: linear-gradient(to top right, rgba(90, 149, 207, 0.5), rgba(58, 76, 99, 0.8));
  color: hsla(0, 0%, 100%, 0.8);
  backdrop-filter: blur(6px);
  z-index: 10;
}

filter - 常用滤镜效果(毛玻璃、图片阴影、图片褪色)_第2张图片

图片黑白

.img-gray {
    filter: grayscale(1) drop-shadow(10px 10px 10px rgba(0, 0, 0, 0.5));
}

filter - 常用滤镜效果(毛玻璃、图片阴影、图片褪色)_第3张图片

调整图片色相和对比度

.img-color--change {
  filter: contrast(1.2) hue-rotate(274deg) drop-shadow(10px 10px 10px rgba(0, 0, 0, 0.5));
}

filter - 常用滤镜效果(毛玻璃、图片阴影、图片褪色)_第4张图片

使元素或文字变圆润

以文字为例。

做法:

  1. 先将文字 blur 模糊。
  2. 在父元素中设置背景色和 filter 滤镜,并增大对比度 contrast。
    1. filter: contrast(); 和 background-color 一定要一起显示出现在父元素中,父元素层级不限。

原理:
文字模糊后,父元素又加强对比度,加大对比度的作用是会让文字更清晰。但本身文字已经是模糊的了。因此对于文字的边缘地带,浏览器会自动融合文字颜色和背景色。整体效果就是文字变圆润了。

.text-card {
    display: flex;
    justify-content: space-evenly;
    font-size: 60px;
    font-weight: 700;
}
.text-card--soft {
    background-color: #ffffff;
    filter: contrast(15);
}
.text--soft {
    color: red;
    filter: blur(5px);
}

"text-card">

"text">ikun

"text-card--soft">

"text--soft">ikun

filter - 常用滤镜效果(毛玻璃、图片阴影、图片褪色)_第5张图片

你可能感兴趣的:(HTML/CSS,前端,css,filter,毛玻璃,黑白图片)