前端 CSS 经典:filter 滤镜

简介: 前端 CSS 经典:filter 滤镜

前言:什么叫滤镜呢,就是把元素里的像素点通过一套算法转换成新的像素点,这就叫滤镜。而算法有 drop-shadowblurcontrastgrayscalehue-rotate 等。我们可以通过这些算法实现一些常见的 css 样式。

1. drop-shadow 图片阴影

可以用来设置图片阴影,相较于 box-shadow 设置盒子阴影,drop-shadow 设置的是元素中的像素点的阴影,用法基本和 box-shadow 一致。例子如下:给图像设置阴影。背景透明人物图像是博主自己用 ps 扣的,有点瑕疵,别介意。网上下不到素材,全是收费的,过分。

素材图:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      img {
        filter: drop-shadow(10px 10px 10px rgba(0, 0, 0, 0.5));
      }
    </style>
  </head>
  <body>
    <img src="/demo.png" />
  </body>
</html>

效果图:

2. blur 高斯模糊

里面传入一个值,这个值叫模糊半径,值越大,越模糊。可以用来设置毛玻璃效果。什么叫毛玻璃效果呢,就是透过设置了毛玻璃效果的元素,看遮挡下的元素是模糊的效果,就叫毛玻璃效果。那就不能用 filter 了,因为 filter 是让当前元素像素点参与计算,需要用到 drop-filter,drop-filter 是让当前元素下面盖着的元素参与计算。例子如下:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .contain {
        width: 500px;
        height: 500px;
        margin: 200px auto;
        position: relative;
      }
      p {
        position: absolute;
        top: 0;
        z-index: 998;
      }
      .box {
        position: absolute;
        top: 0;
        height: 270px;
        width: 450px;
        border-radius: 25px;
        background: rgba(47, 185, 203, 0.2);
        backdrop-filter: blur(5px);
        border: 2px solid rgba(47, 185, 203, 0.1);
        box-shadow: 0 0 80px rgba(47, 185, 203, 0.1);
        overflow: hidden;
        z-index: 999;
      }
    </style>
  </head>
  <body>
    <div class="contain">
      <p>
        这是一个磨砂玻璃样式下的一些文字,这是一个磨砂玻璃样式下的一些文字,这是一个磨砂玻璃样式下的一些文字,这是一个磨砂玻璃样式下的一些文字,这是一个磨砂玻璃样式下的一些文字,这是一个磨砂玻璃样式下的一些文字,
      </p>
      <div class="box"></div>
    </div>
  </body>
</html>

3. contrast 对比度

contrast 设置对比度,默认值是 1,这个值越大,对比度越大,什么叫对比度呢,就是白的越白,黑的越黑。颜色之间的对比越明显。

可以配合 blur 模糊,做字体效果。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        background: #fff;
        color: #000;
        filter: contrast(30);
      }
      h1 {
        margin: 0;
        font-size: 10em;
        filter: blur(10px);
      }
    </style>
  </head>
  <body>
    <div class="box">
      <h1>666</h1>
    </div>
  </body>
</html>

4. grayscale 灰度

grayscale 设置灰度,当值设为 1 时,元素里的所有像素点就变成灰度值,这个属性很有用,当遇到纪念日时,需要把网站变成黑白的,就可以在

html 元素中设置灰度。打开百度,找到在 html 下设置灰度值。

html {
  filter: grayscale(1);
}


5. hue-rotate 色相环

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


目录
相关文章
|
8天前
|
存储 前端开发 Windows
对于莫名其妙使用smarttomcat上传前端项目失败,上传css等静态资源失败等原因,及解决方法
对于莫名其妙使用smarttomcat上传前端项目失败,上传css等静态资源失败等原因,及解决方法
|
20天前
|
前端开发 Java
前端面试题01(css)
前端面试题01聚焦CSS,涵盖选择器优先级、隐藏元素方法、px与rem差异、重绘与重排解释、元素居中技巧及可继承属性。还探讨了CSS预处理器SASS和LESS的特性。文章提供实例代码展示居中布局的多种实现方式。鼓励读者点赞和支持。
14 0
|
24天前
|
前端开发
前端 CSS 经典:SVG 描边动画
前端 CSS 经典:SVG 描边动画
28 0
|
24天前
|
前端开发
前端 CSS 经典:好看的文字阴影
前端 CSS 经典:好看的文字阴影
20 0
|
24天前
|
前端开发
前端 CSS 经典:模特换装效果
前端 CSS 经典:模特换装效果
40 0
|
24天前
|
前端开发
前端 CSS 经典:弧形边框选项卡
前端 CSS 经典:弧形边框选项卡
26 0
|
24天前
|
前端开发
前端 CSS 经典:CSS 包含块
前端 CSS 经典:CSS 包含块
21 0
|
10天前
|
JSON 前端开发 JavaScript
前端Ajax、Axios和Fetch的用法和区别笔记
前端Ajax、Axios和Fetch的用法和区别笔记
17 2
|
27天前
|
移动开发 前端开发 JavaScript
10款精美的web前端源码的特效,2024年最新面试题+笔记+项目实战
10款精美的web前端源码的特效,2024年最新面试题+笔记+项目实战
|
30天前
|
存储 前端开发 JavaScript
前端笔记_OAuth规则机制下实现个人站点接入qq三方登录
前端笔记_OAuth规则机制下实现个人站点接入qq三方登录
47 1