强大的css滤镜filter

Herozzq
791 阅读4分钟

滤镜大家生活中应该都有用过，一般都是对图像进行一些颜色上的处理，css中的滤镜filter也类似，但是不仅可以作用于图像还可以对页面其他元素进行意想不到的处理，下面给大家演示一下filter的强大之处。

filter共有10个滤镜函数，如下所示

  • blur()：模糊图像
  • brightness() ：让图像更明亮或更暗淡
  • contrast()：增加或减少图像的对比度
  • drop-shadow()：在图像后方应用投影
  • grayscale()：将图像转为灰度图
  • hue-rotate()：改变图像的整体色调
  • invert()：反转图像颜色
  • opacity()：改变图像透明度
  • saturate()：超饱和或去饱和输入的图像
  • sepia()：将图像转为棕褐色

这里会挑几个项目中可能会用到的来解析一下

blur()

blur其实就是高斯模糊的效果，可以理解为屏幕上互相融合的像素数量，我们常见的毛玻璃效果就可以用这个属性去实现

<img class="filter-blur"
    src="https://store.storeimages.cdn-apple.com/8756/as-images.apple.com/is/iphone-compare-iphone-14-202309?wid=384&hei=512&fmt=jpeg&qlt=90&.v=1693516153040"
    alt="">

<style>
.filter-blur {
    width: 200px;
    height: 100%;
    filter: blur(5px)
  }
</style>

如上所示，模糊的程度会随着blur 的数值增大而增大,属性值只能为px,不仅仅是图片任何页面元素比如文字，视频都要可以适用于filter。在页面中一些突出显示要模糊其它元素的时候用可以用blur去处理。

drop-shadow()

顾名思义这是投影的意思，但是这和我们常用的box-shadow还是有以下几点不同

  1. drop-shadow它不支持阴影扩展，不支持内阴影，不支持累加投影
  2. 不同于box-shadow只会在盒子的四周留下阴影，它能使盒子中镂空或透明的部分也出现阴影轮廓

我们通过绘制下列一个不规则图形可以看到这两者的明显区别

<div class="container">
 <div class="item" style="border-bottom-color: pink; transform: rotateZ(0);"></div>
 <div class="item" style="border-bottom-color: slateblue; transform: rotateZ(90deg);"></div>
 <div class="item" style="border-bottom-color: slategrey; transform: rotateZ(180deg);"></div>
 <div class="item" style="border-bottom-color: salmon; transform: rotateZ(270deg);"></div>
</div>

<style>
.item {
    display: block;
    height: 0px;
    width: 4px;
    border-width: 0px 4px 80px 4px;
    border-style: none solid solid;
    border-color: transparent;
    position: absolute;
    transform-origin: bottom;
  }

  .container {
    display: inline-flex;
    justify-content: center;
    width: 160px;
    height: 160px;
    filter: drop-shadow(1px 1px 5px black)
    /* box-shadow: 1px 1px 5px black; */
  }
</style>

上述例子可以看出box-shadow阴影是贴着外侧容器的矩形，而drop-shadow的阴影则是贴着内侧元素存在的，这可以让我们实现更多自定义的效果。

grayscale()

灰度属性也项目中可能用到次数很多的属性，它非常简单，但是很实用。

 比如我们项目中涉及人员头像的不同状态就可以用grayscale来处理

<img src="https://pic3.zhimg.com/80/v2-692288bf53e159138aa980ea27bc2fd2_720w.webp" alt="">

<style>
 img {
    width: 200px;
    height: 200px;
    filter: grayscale(1);
  }
</style>

grayscale的值可以是0-1，也可以是1%-100%

可能不仅仅是遇到头像可以用，项目中的一些图标或者logo要涉及到状态变化置灰的都可以用filter: grayscale来实现，这往往可以帮我们节省额外引入状态图标的资源。

此外一些C端的网站在一些特殊的纪念日可以直接在整个网页的body上加grayscale属性非常简便的实现全网页置灰的效果，如下所示

invert()

反转颜色，上次分享我们有用到过这个属性来反转整个网页颜色，这个属性在实际使用中可以结合别的api一起实现一些非常好用的效果，比如根据背景色自动切换黑白文字

  <div class="box">
    <span class="text">文字效果</span>
  </div>

<style>
.box {
    width: 200px;
    height: 50px;
    display: grid;
    place-items: center center;
    color: yellow;
    background-color: currentColor;
  }

  .box span {
    filter: grayscale(1) contrast(999) invert(1);
  }
</style>

currentColor这里用来让文字颜色和背景颜色关联，让背景色跟随文字颜色。

实现这个效果我们总共分三步

第一步：就要让彩色文字先变成黑白，那就用到我们上面提过的grayscale属性。效果如下

但是目文件颜色是灰色并不是我们要的黑白色

第二步：我们用contrast来加强图像的对比度，让文字和背景区分的更明显，让灰色的文字变白

效果如下

但是黄色的背景和白色的文字依然难看清，此时浅色背景应该显示的是黑色文字

第三步：下面我们就要用到invert来反转文字颜色让它变成容易识别的黑色，效果如下

这样看就舒服多了，我们可以尝试改变不同的背景颜色，文字总会在黑白中选个最适合的颜色来展示

浏览器兼容性

avatar
文章
阅读
粉丝