前端 CSS 经典:filter 滤镜

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

1. drop-shadow 图片阴影

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

素材图:

html 复制代码
<!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 是让当前元素下面盖着的元素参与计算。例子如下:

html 复制代码
<!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 模糊,做字体效果。

html 复制代码
<!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 下设置灰度值。

css 复制代码
html {
  filter: grayscale(1);
}

5. hue-rotate 色相环

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

相关推荐
泰山小张只吃荷园8 分钟前
期末Python复习-输入输出
java·前端·spring boot·python·spring cloud·docker·容器
悦涵仙子43 分钟前
vueuse中的useTemplateRefsList
前端·javascript·vue.js
萧萧玉树44 分钟前
分布式在线评测系统
前端·c++·后端·负载均衡
haima951 小时前
ubuntu安装chrome无法打开问题
前端·chrome
放逐者-保持本心,方可放逐1 小时前
XSS 与 CSRF 记录
前端·xss·csrf·浏览器安全
徊忆羽菲1 小时前
利用HTML5和CSS来实现一个漂亮的表格样式
前端·css·html5
不爱说话郭德纲1 小时前
Stylus、Less 和 Sass 的使用与区别
前端·css·面试·less·sass·stylus
凄凄迷人2 小时前
如何调试 chrome 崩溃日志(MAC)
前端·chrome·macos·crash
蒙特网站2 小时前
网站布局编辑器前端开发:设计要点与关键考量
前端·javascript·学习·html
理想不理想v2 小时前
前端开发工程师需要学什么?
java·前端·vue.js·webpack·node.js