前端 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 设置色相环,它可以调整像素点的色相,函数里面的角度,就是色相环上对应的颜色。

相关推荐
qq_3901617721 分钟前
防抖函数--应用场景及示例
前端·javascript
John.liu_Test1 小时前
js下载excel示例demo
前端·javascript·excel
Yaml41 小时前
智能化健身房管理:Spring Boot与Vue的创新解决方案
前端·spring boot·后端·mysql·vue·健身房管理
PleaSure乐事1 小时前
【React.js】AntDesignPro左侧菜单栏栏目名称不显示的解决方案
前端·javascript·react.js·前端框架·webstorm·antdesignpro
哟哟耶耶1 小时前
js-将JavaScript对象或值转换为JSON字符串 JSON.stringify(this.SelectDataListCourse)
前端·javascript·json
getaxiosluo1 小时前
react jsx基本语法,脚手架,父子传参,refs等详解
前端·vue.js·react.js·前端框架·hook·jsx
理想不理想v1 小时前
vue种ref跟reactive的区别?
前端·javascript·vue.js·webpack·前端框架·node.js·ecmascript
知孤云出岫1 小时前
web 渗透学习指南——初学者防入狱篇
前端·网络安全·渗透·web
贩卖纯净水.1 小时前
Chrome调试工具(查看CSS属性)
前端·chrome
栈老师不回家2 小时前
Vue 计算属性和监听器
前端·javascript·vue.js