欢迎点击「算法与编程之美」↑关注我们！

本文首发于微信公众号："算法与编程之美"，欢迎关注，及时了解更多此系列文章。

问题描述

当在拍照、p图时，有一个东西必不可少那就是滤镜，适当地运用滤镜可以使图片更加的赏心悦目，而作为网页的美化技术来说，CSS同样也具有滤镜的属性。CSS 3 Filter属性就提供了相当于滤镜的模糊和改变元素颜色的功能，使图像产生更加绚丽多彩的效果。接下来就来学习一下CSS3的Filter属性。

具体内容

1滤镜属性简介

CSS滤镜的语法：

filter: none | blur() | brightness() |  contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() |  opacity() | saturate() | sepia() | url();

CSS滤镜参数的含义如下表：

参数名称

效果

blur()

设置图片的高斯模糊效果

brightness()

设置图片的明暗度效果

contrast()

设置图片的对比度

grayscale()

将图片转化为灰度图像

drop-shadow()

设置图片的一个阴影效果

hue-rotate()

给图片应对色相旋转

invert()

反转输入图像

opacity()

转化图像的透明程度

saturate()

转化图像的饱和度

sepia()

将图像转化为深褐色

2 基本滤镜效果

接下来给大家介绍几个实用的滤镜效果语法。

2.1 高斯模糊（blur）滤镜

blur滤镜用于设置图片的高斯模糊效果。blur滤镜的语法格式如下：

filter : blur (px)

其中px的值越大，图像就越模糊。

示例：

<!DOCTYPE html>

<html>

<head>

<meta  charset="UTF-8">

<title>高斯模糊</title>

<style  type="text/css">

img{

width:  20%;

height:  auto;

}

.blur{

-webkit-filter:  blur(4px);

filter:  blur(4px);

}

</style>

</head>

<body>

原图：

<img  src="img/xiaozhan.jpg" alt="原图"  >

高斯模糊：

<img  src="img/xiaozhan.jpg" alt="高斯模糊">

</body>

</html>

效果：

图1.1 高斯模糊效果图

2.2 明暗度（brightness）滤镜

brightness滤镜用于设置图片的明暗度效果。brightness滤镜的语法如下：

filter : brightness (%)

当参数设置为0%时，图像会变成全黑；当参数为100%时图像无变化；当参数超过100%时图像会比原来还要亮。

示例：

<!DOCTYPE html>

<html>

<head>

<meta  charset="UTF-8">

<title>高斯模糊</title>

<style  type="text/css">

img{

width:  20%;

height:  auto;

}

.a{

-webkit-filter:  brightness(150%);

filter: brightness(150%);

}

.b{

-webkit-filter:  brightness(30%);

filter:  brightness(30%);

}

</style>

</head>

<body>

原图：

<img  src="img/xiaozhan.jpg" alt="原图"  >

图像变亮：

<img src="img/xiaozhan.jpg"  alt="图像变亮">

图像变暗：

<img src="img/xiaozhan.jpg"  alt="图像变暗">

</body>

</html>

效果：

图2.2 明暗度滤镜效果图

2.3  对比度滤镜

contrast滤镜用于设置图像的对比度效果。其语法格式如下：

filter : contrast (%)

当参数设置为0%时，图像会变成全黑；当参数为100%时图像无变化。

示例：

<!DOCTYPE html>

<html>

<head>

<meta  charset="UTF-8">

<title>高斯模糊</title>

<style  type="text/css">

img{

width:  20%;

height:  auto;

}

.a{

-webkit-filter:  contrast(150%);

filter:  contrast(150%);

}

.b{

-webkit-filter:  contrast(30%);

filter:  contrast(30%);

}

</style>

</head>

<body>

原图：

<img  src="img/xiaozhan.jpg" alt="原图"  >

图像变亮：

<img src="img/xiaozhan.jpg"  alt="图像变亮">

图像变暗：

<img src="img/xiaozhan.jpg"  alt="图像变暗">

</body>

</html>

效果：

图2.3 对比度滤镜效果

2.4  阴影（drop-shadow）滤镜

drop-shadow滤镜用于设置图像的阴影效果，使元素内容在页面上产生投影，从而实现立体的效果，其语法格式如下：

arrayObject.length;

示例：

<!DOCTYPE html>

<html>

<head>

<meta  charset="UTF-8">

<title>高斯模糊</title>

<style  type="text/css">

img{

width:  20%;

height:  auto;

}

.a{

-webkit-filter:  drop-shadow(15px 15px 20px grey);

filter:  drop-shadow(15px 15px 20px grey);

}

.b{

-webkit-filter:  drop-shadow(30px 30px 10px blue);

filter:  drop-shadow(30px 30px 10px blue);

}

</style>

</head>

<body>

原图：

<img  src="img/xiaozhan.jpg" alt="原图"  >

灰色阴影：

<img src="img/xiaozhan.jpg"  alt="灰色阴影">

蓝色阴影：

<img src="img/xiaozhan.jpg"  alt="蓝色阴影">

</body>

</html>

效果：

图2.4 阴影滤镜效果

3 复合滤镜效果的使用

上面主要是介绍了一些基础的单个滤镜的效果，而综合的使用滤镜效果可以产生一些奇特的动画效果。接下来就来制作一个电闪雷鸣的动画效果吧，在此次的例子里面主要使用了明暗度滤镜、对比度滤镜和深褐色滤镜。

示例：

<!DOCTYPE html>

<html>

<head>

<meta  charset="UTF-8">

<title>动态效果</title>

<style>

body  {

text-align:  center;

}

img  {

max-width:  100%;

width:1000px;

}

img  {

-webkit-animation:  haunted 4s infinite;

animation:  haunted 4s infinite;

}

@keyframes  haunted{

0%  {

-webkit-filter:  brightness(20%);

filter:  brightness(20%);

}

45% {

-webkit-filter:  brightness(20%);

filter:  brightness(20%);

}

50%  {

-webkit-filter:  sepia(1) contrast(2) brightness(200%);

filter:  sepia(1) contrast(2) brightness(200%);

}

60%  {

-webkit-filter:  sepia(1) contrast(2) brightness(200%);

filter:  sepia(1) contrast(2) brightness(200%);

}

65%  {

-webkit-filter:  brightness(20%);

filter:  brightness(20%);

}

95%  {

-webkit-filter:  brightness(20%);

filter:  brightness(20%);

}

95%  {

-webkit-filter:  brightness(400%);

filter:  brightness(400%);

}

}

</style>

</head>

<body>

<img  src="../img/shandian.jpg"/>

</body>

</html>

效果：

图3.1 动态效果过程1

图3.2 动态效果过程2

图3.3 动态效果过程3

在上述代码中通过运用@keyframes来规定动画的规则。通过在不同时间点运用不同的滤镜来造成图片动态的效果。

结语

CSS3的滤镜的强大属性可以使图片更加美观，同时运用动画设置图片的复合滤镜也可以使图片动起来。虽然属性的效果可能比不上PS，但是运用的好的话也可以在节约很多空间下和P图的时间，在网页的制作上，可以把一张图片变成多张图片。

END

编  辑   |   王楠岚

责  编   |   杨金月

 where2go 团队

   

微信号：算法与编程之美

长按识别二维码关注我们!

温馨提示：点击页面右下角“写留言”发表评论，期待您的参与！期待您的转发！

JavaScript|你不知道的CSS属性-Filter（滤镜）相关推荐

  1. 使用JavaScript删除CSS属性

    如何使用JavaScript删除CSS属性?下面本篇就来给大家介绍一下使用JavaScript删除CSS属性的方法,希望对大家有所帮助. 方法一:使用removeProperty()方法 remove ...

  2. 如何使用JavaScript删除CSS属性？

    In this article, we'll see how we can remove a CSS property from a certain element using JavaScript? ...

  3. html title属性无效_【学习教程】使用JavaScript删除CSS属性

    方法1:使用CSS removeProperty:该CSSStyleDeclaration.removeProperty()方法被用来从一个元件的样式删除一个属性.通过遍历styleSheets数组并 ...

  4. js .style javaScript控制css属性

    盒子标签和属性对照 CSS语法(不区分大小写) JavaScript语法(区分大小写) border border border-bottom borderBottom border-bottom-c ...

  5. 一个css属性让页面变成黑白色之CSS3 filter(滤镜) 属性

    2020年是不平凡的一年,在此缅怀一下在抗击新冠肺炎中牺牲的烈士和因为新冠肺炎去世的同胞们,有时候我们需要让网站的页面变成黑白色彩的,只需要一个css属性filter属性即可: filter 属性定义 ...

  6. 说说filter这个css属性（网站置灰实现）

    在2020年4月4日这一天,大家无论打开手机.电脑网页还是APP,都可以看到所有的内容都已经变成了灰色,大家可能还会误以为是网站统一换了一套css样式,不过后面转念一想这么多网站及页面,如果要统一换样 ...

  7. javascript操作html元素CSS属性

    以下先记录一下JS控制CSS所使用的方法. 1.使用javascript更改某个css class的属性... <style type="text/css">  .or ...

  8. 【css滤镜】高级属性filter

    概述 2022年11月30日江老去世,然后我们发现各大网站和app首页都变成了灰色.还有一些特殊的日子,我们经常见到网站首页变灰色,作为一个前端开发者肯定会有好奇的同志,其实很简单,只要一个css属性 ...

  9. css3 filter url,CSS3 filter(滤镜) 属性

    CSS3 filter(滤镜) 属性 实例 修改所有图片的颜色为黑白 (100% 灰度): img { -webkit-filter: grayscale(100%); /* Chrome, Safa ...

最新文章

  1. Android ListView (多个adapter 说明)
  2. 【机器学习】基于自适应变异粒子群算法的非线性函数寻优
  3. JavaScript - 动态数据
  4. mac显示无法连接adobe服务器,Mac安装Adobe软件，如遇Error提示解决方法
  5. c语言基础练习题 字符串输入scanf/gets 字符串赋值、比大小
  6. Java toBinaryString()函数探究及Math.abs（-2147483648）=-2147483648原理探究
  7. dubbo+zookeeper与 eureka的区别
  8. JS基础入门篇（四）—this的使用，模拟单选框，选项卡和复选框
  9. Jetty 和tomcat 比较研究初探
  10. java lambda教程_Lambda系列教材 （一）- Java Lambda 表达式教程
  11. eclipse报错： Unhandled event loop exception No more handles
  12. C Coding Standard
  13. 【学堂在线数据挖掘：理论方法笔记】第三天（3.27）
  14. css - 布局 - rem布局
  15. 安卓逆向_6 --- Dalvik 字节码、Smali 详解
  16. SEI文献整理2：A Review of Radio Frequency Fingerprinting Techniques（2020）
  17. 六西格玛dfss_六西格玛设计DFSS概述
  18. Win10录屏有哪些方法？快来了解一下录屏技巧
  19. C++判断系统位数(64位或32位)
  20. 苹果三代耳机_Airpods pro苹果三代无线蓝牙耳机

热门文章

  1. 如何保护客户数据并降低合规风险
  2. 理解adapterview
  3. Flutter_html 页面退出 音轨不停 BUG
  4. Android百度地图开发（二）定位之自动定位及标注（及定位几日内瓦或坐标4.9E-324问题）
  5. 【Linux 运维系列】Ubuntu 运维总结
  6. linux如何执行exp脚本,linux执行脚本命令cf自瞄
  7. wsus无法获取计算机,wsus没有客户端计算机
  8. Phoenix之协处理器
  9. php垂直搜安装,七大垂直搜索引擎
  10. 最新解决 TKK: 更新 TKK 失败，请检查网络连接 idea翻译错误