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

最新推荐文章于 2024-07-16 08:45:00 发布
最新推荐文章于 2024-07-16 08:45:00 发布
阅读量934 收藏 1
点赞数
《算法与编程之美》技术专栏荣获2020年腾讯云+社区“人气作者”优秀专栏，2021年荣获“CSDN博客专家”称号，全网累计阅读量突破100万人次。
本文链接：https://blog.csdn.net/gschen_cn/article/details/105085791
版权

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

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

问题描述

当在拍照、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 JS 滤镜
01-03
JS滤镜 浏览器支持情况 滤镜知识详细介绍。
CSS教程·滤镜
10-30 1813
1、概述　　好了，下面我们将进入CSS的最精彩的部分--滤镜，它将把我们带入绚丽多姿的多媒体世界。正是有了滤镜属性，页面才变得更加漂亮。　　CSS的滤镜属性的标识符是filter。为了使您对它有个整体的印象，我们先来看一下它的书写格式：　　 filter：filtername（parameters） 　　怎么样？是不是很简单，看上去与前面讲的属性定义没什么太大的差别。Filter是滤镜
CSS filter（滤镜）属性，并实现页面置灰效果
m0_65029152的博客
07-04 1977
本文主要记录CSS中的filter（滤镜）属性的使用方法及其效果；
CSS滤镜（filter）
热门推荐
zg0601的博客
10-23 2万+
目录 1、概念 2、使用 3、常用filter函数 4、常用滤镜实例
css滤镜
最新发布
weixin_59855825的博客
07-16 178
调整元素的对比度。1为原始值，大于1增加对比度，小于1降低对比度。：调整元素的饱和度。1为原始值，大于1增加饱和度，小于1降低饱和度。：给元素添加阴影效果。1为原始值，大于1增加亮度，小于1降低亮度。这些滤镜效果可以单独使用，也可以组合在一起，用逗号分隔。1为完全褐色，0为无褐色效果。：给元素应用高斯模糊效果。1为完全灰度，0为无灰度效果。单位为角度，0deg为原始值。1为完全反转，0为无反转效果。这将使元素变为灰度，同时应用模糊和降低亮度效果。：调整元素的透明度。0为完全透明，1为不透明。
CSS滤镜
Wangxinlei_King的博客
09-15 303
前面的话   CSS滤镜filter用于模糊、锐化、元素变色等操作， 通常适用于图片、背景等。本文将详细介绍CSS滤镜filter 语法 filter 初始值: none 应用于: 所有元素 继承...
CSS-filter-Demo:微信小程序 CSS filter（滤镜）的使用示例
05-08
之前在看七月老师的视频的时候，看到了有一个样式是-webkit-filter，不知道是什么，于是查了一下，原来是滤镜吖。但是在微信小程序里使用的时候，下面一直飘红线，再仔细查了一下，原来是在Chrome, Safari, Opera中...
javascript经典特效---图片滤镜效果.rar
01-02
3. **滤镜函数**：在Canvas上，可以使用`context.drawImage()`方法绘制图片，并通过`context.filter`属性设置CSS滤镜效果，如`grayscale()`, `sepia()`, `blur()`, `brightness()`, `contrast()`, `hue-rotate()`, `...
前端开源库-postcss-filter-gradient
08-30
PostCSS Filter Gradient 插件是针对PostCSS的一个扩展，它的主要功能是将现代CSS中的渐变语法转换为旧版IE所支持的滤镜（filter）语法。渐变在现代CSS中是一种常见的效果，但IE8至IE9并不支持CSS3的渐变语法。这个...
css-filter-demo:一些可用CSS过滤器的演示
03-10
这个“css-filter-demo”项目显然是一个用于演示CSS滤镜效果的实例集合，可能包含了一系列JavaScript代码，帮助我们更好地理解和应用这些滤镜。在本文中，我们将深入探讨CSS滤镜以及如何通过JavaScript来操控它们。 ...
javascript滤镜javascript滤镜javascript滤镜
04-13
javascript滤镜javascript滤镜javascripjavascript滤镜t滤镜javascjavascript滤镜ript滤镜javascript滤镜
javascript滤镜做的一个博客
06-03
一个用滤镜做的网页特效希望可以相互学习，请多多指教
滤镜效果（Html+JavaScript）
10-25
自己写的滤镜效果，很多。使用： 1.Html+Div+Css界面布局美观 2.javaScript
css 滤镜
hugejihu9的专栏
01-22 201
文章来自：源码在线https://www.shengli.me/css/613.html       效果：          
CSS3 webkit-filter滤镜效果详解与示例
"这篇文档详细介绍了CSS3...CSS3滤镜通过`-webkit-filter`提供了一种强大且灵活的方式，让网页设计师能够在不依赖JavaScript或图片处理的情况下，直接在CSS中实现丰富的视觉特效，极大地提升了网页的交互性和用户体验。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

算法与编程之美

欢迎关注『算法与编程之美』

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值