CSS中经常用到的filter属性,你真的知道它的用法吗?

rookiefishs
171 阅读5分钟

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

因此,filter的属性也就是不同的滤镜,使用的属性不同,滤镜也就不同,页面上所展示的效果也就不同,以下是filter的各个属性的应用以及效果图

1. filter: blur()

顾名思义，filter: blur() 的作用就是将页面中的元素或者图片变得模糊不清,这在一些毛玻璃效果中应用广泛

语法: filter: blur(模糊度)

效果图:

blur

实例代码:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>模糊度</title>
    <style>
      body,
      html {
        display: flex;
        justify-content: center;
      }
      .box {
        width: 500px;
        height: 500px;
        margin: 100px 0;
        background-color: red;

        /* filter: blur(模糊度) 模糊度默认为0 */
        filter: blur(10px);
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>

2. filter: brightness()

brightness 属性用于控制页面中元素以及图片的亮度,其原理为将线性乘法器应用于输出图像,以调整其亮度,值为0%将创建为全黑图像,值为100%则保持原来的颜色没有变化,如果值大于100%就会使图像变得更加明亮

语法: filter: brightness(亮度)

效果图:

brightness

实例代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>亮度</title>
    <style>
      body,
      html {
        display: flex;
        justify-content: center;
      }
      .box {
        width: 500px;
        height: 500px;
        margin: 100px 0;
        background-color: red;

        /* filter: brightness(亮度) 亮度默认为1 */
        filter: brightness(0.4);
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>

3. filter: contrast

contrast属性用与控制页面元素以及图片显示的对比度,如果值为0%将会使图片变为灰色,如果值为100%则没有影响,值大于100%时将增强对比度

语法: filter: contrast(对比)

效果图:

contrast

实例代码:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>对比度</title>
    <style>
      body,
      html {
        display: flex;
        justify-content: center;
      }
      .box {
        width: 500px;
        height: 500px;
        margin: 100px 0;
        background-color: red;

        /* filter: contrast(对比度) 对比度默认为1 */
        filter: contrast(0.4);
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>

4. filter: drop-shadow()

drop-shadow()属性可以生成生成轮廓阴影阴影效果,其语法类似于box-shadow属性,但其不允许使用inset关键字以及spread参数,与所有的filter属性一样,任何在drop-shadow()后的滤镜同样会应用在阴影上

语法: filter: drop-shadow(水平偏移量 垂直偏移量 模糊度 阴影颜色) 模糊度默认为0,阴影颜色默认为黑色

效果图:

drop-shadow

实例代码:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>生成轮廓阴影</title>
  <style>
    body,
    html {
      display: flex;
      justify-content: center;
    }

    img {
      margin: 100px 0;
      /* 直接添加box-shadow只会给盒子添加阴影,阴影并不会作用到内部的图像中 */
      /* box-shadow: 10px 10px 5px #888888; */
      /* filter: drop-shadow(水平偏移量 垂直偏移量 模糊度 阴影颜色) 模糊度默认为0,阴影颜色默认为黑色 */
      filter: drop-shadow(10px 10px 10px rgba(0, 0, 0, 0.5));
    }
  </style>
</head>

<body>
  <img src="./images/demo2.png" alt="" />
</body>

</html>

5. filter: grayscale()

grayscale属性可以将页面中的元素或图像转换为灰度图,值为100%时将其完全转换为灰度图像,若为初始值0%则图像无变化,值在0% - 100%之间,就是灰度效果的线性乘数

语法: filter: grayscale(灰度值)

效果图:

grayscale

实例代码:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>灰度</title>
    <style>
      body,
      html {
        display: flex;
        justify-content: center;
      }
      .box {
        width: 500px;
        height: 500px;
        margin: 100px 0;
        background-color: red;

        /* filter: grayscale(灰度) 灰度默认为0 */
        filter: grayscale(1);
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>

6. filter: hue-rotate()

filter: hue-rotate()属性表示应用色相旋转,值可以设定图像会被调整的色环角度值,值为0deg,则图像无变化

语法: filter: hue-rotate(0deg - 360deg)

效果图:

filter: hue-rotate

实例代码:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>色相旋转</title>
    <style>
      body,
      html {
        display: flex;
        justify-content: center;
      }
      .box {
        width: 500px;
        height: 500px;
        margin: 100px 0;
        background-color: red;

        /* filter: hue-rotate(色相旋转) 色相旋转默认为0 */
        filter: hue-rotate(90deg);
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>

7. filter: invert()

filter: invert()属性表示反转输入图像,值为100%则图像完全反转,值为0%则图像无变化,值在0% - 100% 之间,则是该效果的线性乘数

语法: filter: invert(0% - 100%) 或 filter: invert(0 - 1)

效果图:

filter: invert

实例代码:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>反转</title>
    <style>
      body,
      html {
        display: flex;
        justify-content: center;
      }
      .box {
        width: 500px;
        height: 500px;
        margin: 100px 0;
        background-color: red;

        /* filter: invert(反转) 反转默认为0 */
        filter: invert(1);
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>

8. filter: opacity()

filter: opacity()属性表示元素或图片的透明度应用,值为0%时则完全透明,值为100%时无变化

语法: filter: opacity(0 - 1)

效果图:

filter: opacity

实例代码:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>透明度</title>
    <style>
      body,
      html {
        display: flex;
        justify-content: center;
      }
      .box {
        width: 500px;
        height: 500px;
        margin: 100px 0;
        background-color: red;

        /* filter: opacity(透明度) 透明度默认为1 */
        filter: opacity(0.5);
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>

9. filter: saturate()

filter: saturate()属性可以改变图像的饱和度,值为0%表示图像完全不饱和,值为100%则图像无变化,超过100%时增加饱和度

语法: filter: saturate(0% - 100%)

效果图:

filter: saturate

实例代码:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>饱和度</title>
    <style>
      body,
      html {
        display: flex;
        justify-content: center;
      }
      .box {
        width: 500px;
        height: 500px;
        margin: 100px 0;
        background-color: red;

        /* filter: saturate(饱和度) 饱和度默认为1 */
        filter: saturate(0.5);
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>

10. filter: sepia()

filter: sepia()属性可以将图像转换为深褐色,值为100%时为完全的深褐色,值为0%则图像无变化

语法: filter: sepia(0% - 100%)

效果图:

filter: sepia

实例代码:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>深褐色</title>
    <style>
      body,
      html {
        display: flex;
        justify-content: center;
      }
      .box {
        width: 500px;
        height: 500px;
        margin: 100px 0;
        background-color: red;

        /* filter: sepia(深褐色) 深褐色默认为0 */
        filter: sepia(1);
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>

11. 组合函数

可以组合任意数量的函数来控制渲染。滤镜将按声明顺序依次应用

效果图:

组合函数

示例代码:

filter: contrast(75%) brightness(33%);

总结: 以上就是CSS的filter属性的所有值以及其所表示的含义了,使用滤镜可以使页面色彩使用起来更为简单,例如毛玻璃效果和页面一键致灰功能等等.....

avatar
文章
阅读
粉丝