filter效果,css3filter怎么使用

2022-08-20 23:30:56 分类：html 阅读()

　　filter效果,css3filter怎么使用

　　

背景

　　

基本概念

　　 CSS滤镜属性将图形效果(如模糊或颜色偏移)应用于元素构成滤镜。滤镜通常用于调整图像、背景和边框的渲染。它的值可以是使用url添加的过滤函数filter-function或svg filter。

　　Filter:Filter-function[Filter-function]* None Filter:URL(file . SVG # Filter-element-id)Filter-function可用于Filter和background-Filter属性。其数据类型由下列筛选函数之一指定。每个函数都需要一个参数。如果参数无效，筛选将不会生效。以下是对filter函数含义的解释：

　　Blur():模糊图像亮度():使图像更亮或更暗对比度():增加或减少图像的对比度drop-shadow():将投影灰度()应用到图像的背面：将图像转换为灰度图像色调-rotate():更改图像的整体色调反转():反转图像颜色不透明度():更改图像透明度饱和度():超饱和或去饱和输入图像sepia():将图像转换为sepia用法示例

　　/*使用SVG filter */filter:URL( filters . SVG # filter-id )；/*使用滤镜功能*/filter:blur(5px)；滤镜：亮度(0.4)；滤镜：对比度(200%)；滤镜：投影(16px 16px 20px蓝色)；滤镜：灰度(50%)；滤镜：色相旋转(90度)；滤镜：反转(75%)；滤镜：不透明度(25%)；过滤器：饱和(30%)；滤镜：棕褐色(60%)；/*多重滤镜*/滤镜：对比度(175%)亮度(3%)；/*不使用filter */filter:none；/*全局变量*/筛选器：inherit过滤器：初始；过滤器：未设置；

　　

应用案例

　　更智能的阴影效果

　　当给元素添加阴影时，我们通常使用box-shadow属性。通过box-shadow的语法形式(x偏移、y偏移、模糊大小、阴影大小、颜色值、插入)很容易给元素添加阴影效果。但是box-shadow也有一个缺点，就是在给透明图片添加阴影效果时，无法穿透元素，只能添加到透明图片元素的盒子模型中。这时filter属性的drop-shadow方法可以很好的解决这个问题，它添加的阴影可以穿透元素，而不是添加到元素的盒子模型边框上。

　　除了投影添加的阴影可以穿透透明元素之外，阴影效果与盒形阴影相同。如果浏览器支持硬件加速，滤镜添加的阴影效果会更真实。

　　投影的语法如下(除了不支持设置插入之外，它与框阴影完全相同):

　　滤镜：投影(x偏移，y偏移，模糊大小，颜色值)；比如：

　　滤镜：投影(1px 1px 15px rgba(0，0，0， 5))；下图是使用“框阴影”和“滤镜：投影”向透明元素添加阴影的比较：

　　img class= box-shadow src= futurama . jpg /img class= drop-shadow src= futurama . jpg /。box-shadow { box-shadow:1px 1px 15px rgba(0，0，0， 5)；}.投影{滤镜：投影(1px 1px 15px rgba(0，0，0， 5))；}

元素、网页置灰

　　，发生重大灾难或其他哀悼日时，国企网站往往有灰掉所有页面的需求。或者在很多网页中，鼠标悬停在一个灰色元素上，会变成一个彩色的样式效果。此时可以使用filter属性的灰度方法来实现，可以调整元素的灰度，通过对页面元素设置filter:gray(100%)来对页面元素进行灰度化。在下面的例子中，body标签下有h1和img标签，如下图添加滤镜样式前所示。

　　body h1 class= title futurama/h1 img class= img width= 500 src=。/images/futurama.jpg //body

　　现在，我们给body元素添加一个. gray类，body就可以将整个网页灰化。灰色{滤镜：灰度(100%)；}

　　为了兼容IE8等其他较低版本的浏览器，我们可以添加浏览器前缀和svg过滤器。gray { -webkit-filter:灰度(1)；-WebKit-滤镜：灰度(100%)；-moz-滤镜：灰度(100%)；-ms-filter:灰度(100%)；-o-滤镜：灰度(100%)；filter:URL( data:image/SVG XML；utf8，SVG xmlns=\ http://www . w3 . org/2000/SVG \ filter id=\ gray \ feColorMatrix type=\ matrix \ values=\ 0.3333 0.3333 0.3333 0.3333 0.3333 0.3333 0.3333 0 0.3333 0 0.33333 0 0.33333 0.33333 0 0 0.33333333 0 0 0 0 0 0 0 0 0 0 0 0 0.33333333333 0 0 0 0 0 0 0 0 0过滤器：progid:DXImageTransform。Microsoft.BasicImage(灰度=1)；滤镜：灰度(100%)；}在制作应急定灰网页时，往往需要在上线一段时间后再移除该功能。我们也可以在第一次上线的时候添加以下类似的方法来控制定灰效果的自动上线和下线时间，让它在到达预定时间的时候自动移除，而不必经过两次施工过程。

　　(函数set gray(){ var end time=date . parse( Apr 06 2077 00:00:01 )；var timestamp=Date . parse(new Date())；if(timestamp=end time){ document . query selector( html ). class list . add( gray )；}})();

元素强调、高亮

　　 brightness方法实现了突出显示元素的效果，可应用于菜单栏和图片列表的悬停效果，以强调鼠标当前悬浮或选中的内容。这里有两种方法可以给一组按钮菜单栏添加亮度和饱和度，通过改变亮度和饱和度来高亮元素。

　　div class= container a class= button /a a class= button /a a class= button /a a class= button dark /a a class= button dark /a a class= button dark /a a class= button disabled /a a class= button disabled /a class= button disabled /a/div . container { margin:40px；}.button { padding:0.5 em 0.5 em；背景：# E0E0E0边框半径：3px} . button . dark { background:# 333；}.按钮：悬停：不(。禁用){ cursor:指针；边框半径：3px滤镜：亮度(110%)饱和(140%)；}.button.disabled {滤镜：灰度(100%)；}

毛玻璃效果

　　磨砂玻璃效果，顾名思义，类似于半透明磨砂玻璃效果。广泛应用于iOS系统、Windows 10等系统的UI中。使用磨砂玻璃效果可以增强视觉体验。《CSS揭秘》等著作中也有系统的说明。下面是我用滤镜：模糊和背景-滤镜：模糊来达到这个效果的总结。

　　有两个具有相同类名glass的div元素，添加了两个类glass-by-filter和glass-by-backward-filter来区分这两种方法。

　　div class= glassglass-by-filter /div div class= glassglass-by-backward-filter /div常规样式，它设置基本样式，如毛玻璃元素的大小和圆角：玻璃{高度：300px宽度：300px边框：1px groove # EFEFEF边框半径：12px背景：rgba(242，242，242，0.5)；盒影：0 0.3px 0.7px rgba(0，0，0，0.126)，0 0.9px 1.7px rgba(0，0，0，0.179)，0 1.8px 3.5px rgba(0，0，0，0.224)，0 3.7px 7.3px rgba(0，0，0，0.277)，0 10px 20px rgba(0，0，0，0.4)；}filter: blur方法，在元素的伪类前添加一个：号。设置模糊方式，放在最底层，达到磨砂玻璃效果。滤光玻璃{ z指数：1；框大小：边框-框；位置：相对；}.{ content:“”之前的筛选玻璃：之前；位置：绝对；top:0；右：0；底部：0；左：0；z索引：-1；背景：继承；滤镜：模糊(10px)；} background-filter:blur直接在元素上添加模糊方法，实现毛玻璃效果。玻璃-背景-过滤器{背景-过滤器：模糊(10px)；}实现效果如下图所示(左：滤镜，右：背景-滤镜):

　　阅读：毛玻璃边框效果：https://css-tricks.com/blurred-borders-in-css

　　艺术照！你甚至可以实现一个简单版本的insatagram。

　　复古、版画、油画、卡通、液化、老照片、冷漠、莫兰迪、赛博朋克、万达幻觉风格都可以实现！

　　通过组合所有的过滤方法，您可以匹配任何想要的效果。下面是一个简单的滤镜方法调整器，可以调整每种方法的值，实时显示画面的滤镜效果。如下图所示。

　　页面主要代码如下，控制区#图像编辑器是一个形式表单，表单每一行分别控制一种过滤器方法的值，展示区#图像容器内部包含一个图片元素，产生的过滤器滤镜作用在该元素上。

　　form id= image editor p label for= GS gray/label input id= GS name= GS type= range min= 0 max= 100 value= 0 /p label for= blur blur/label input id= blur name= blur type= range min= 0 max= 10 value=0 /p label for= br exposure/label input id= br name= br type= range min= 0 label for= saturate saturate/label input id= saturate name= saturate type= range min= 0 max= 500 value= 100 /p label for= sepia sepia/label input id= sepia name= sepia type= range min= 0 max= 100 value= 0 /p input type= Reset 窗体编辑器 id= Reset value= Reset /form div id= image container val()； //灰度var blur=$(#blur ).val()；//blur var br=$(#br ).val()；//亮度var ct=$(#ct ).val()；//对比度var huer=$(#huer ).val()；//hue-rotate var opacity=$( # opacity ).val()；//opacity var invert=$(#invert ).val()；//invert var saturate=$( # saturate ).val()；//饱和var sepia=$(#sepia ).val()；//sepia $(#imageContainer img ).css(滤镜,灰度( gs %)模糊(“模糊”像素)亮度( br %)对比度(联系类型 %)色相-旋转(“huer”deg)不透明度(不透明度 %)反转(反转 %)饱和(饱和 %)棕褐色(棕褐色 %));$(#imageContainer img ).css( -webkit-filter ，灰度( gs %)模糊(“模糊”像素)亮度( br %)对比度(联系类型 %)色调-旋转(“huer”deg)不透明度(不透明度 %)反转(反转 %)饱和(饱和 %)棕褐色(乌贼 %)))；}//当投入值发生变化时即时应用滤镜$(input[type=range]).更改（编辑图像)。mousemove(编辑图像)；现在只是实现了滤镜的实时预览，后续待实现功能包括支持复杂的挽救(保存的简写)滤镜模版、导出下载等，完成这些步骤，以后照片添加滤镜再也不用下载其他应用了。实例完整版代码：https://codepen。io/dragon IR/pen/abJmqxM

　　

节省空间，提高网页加载速度

　　 实践证明，同一图片减小亮度和对比度及色相饱和度之后的体积与原图相比，可以减小很大一部分体积空间2M左右的图片经过弱化后保存，就可以压缩到1M左右。在网页中我们可以使用经过弱化的图片，然后通过半铸钢钢性铸铁(Cast Semi-Steel)过滤器将其还原。这样就可以达到压缩资源体积，提升网页加载速度、提高用户体验的目的。

　　具体操作可阅读以下教程：

　　对比度交换技术：使用半铸钢钢性铸铁(Cast Semi-Steel)过滤器提高图像性能https://CSS-窍门。com/contrast-swap-technique-improved-image-performance-CSS-filters

　　

兼容性

　　 从犬科动物查询结果可以看出，css过滤器属性在现代浏览器中的支持性已经很好了，除了工业管理学(工业工程)浏览器之外，其他浏览器中大多可以正常使用，必要时可添加浏览器内核前缀。但是官网也有以下3个问题提示，相信后续随着浏览器的升级，这些问题也会被逐步修复：

　　在Safari浏览器中，如果子元素具有动画效果，则不会应用任何滤镜。目前还没有浏览器支持投影滤镜的扩散半径法。在Edge browser中，如果元素或子元素的z-index设置为负值，则无法应用过滤器。

　　

总结

　　本文简单列举了几种常用的使用CSS滤镜的页面效果。其实滤镜的每个内置方法都可以有无限的扩展应用，比如反转颜色也可以应用到悬停效果，调整网页的棕褐色值可以达到护眼效果。只要你发挥你的想象力和创造力，filter就能很好地应用于实践。

　　下面的例子是很好的应用。如果有兴趣，可以拓展阅读学习：

　　具有磨砂玻璃效果的https://codepen.io/KazuyoshiGoto/pen/nhstF

　　玻璃破碎效果https://codepen.io/bajjy/pen/vwrKk

　　利用滤波器实现悬停效果https://codepen.io/nxworld/details/ZYNOBZ

　　反色按钮https://codepen.io/monkey-company/pen/zZZvRp

　　老照片https://codepen.io/dudleystorey/pen/pKoqa

　　高级滤镜编辑器：https://codepen.io/stoumann/pen/MWeNmyb

　　最后附上上面滤镜编辑器调整过的复古莫兰迪油画效果滤镜的图片。(哇，这太Wow了，CSS独有的yyds)

　　以上是CSS滤镜妙用的细节。更多关于CSS滤镜的妙用，请关注其他相关文章！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。

标签： html

相关文章阅读

  • characterencodingfilter设定,
  • chain.dofilter作用,chain.dofilter后面的语句还可以执行么
  • ,,filters.revealTrans.Transition使用方法小结
  • Java中过滤器,Java中filter
  • characterencodingfilter设定,,Java CharacterEncodingFilter案例详解
  • ,,Java中过滤器 (Filter) 和 拦截器 (Interceptor)的使用
  • ,,Android中的Intent Filter匹配规则简介
  • python的filter方法,python里filter用例,Python简明讲解filter函数的用法
  • filter是什么函数,filter函数的作用
  • Python 过滤器,filter过滤器用法
  • basefiltering engine无法启动,
  • map reduce filter python,简述内置函数filter、map、reduce的作用-
  • map filter reduce python,map,filter,reduce
  • filter是什么意思英语,空调filter是什么意思
  • vue中的filters,vue.filter在vue中的使用
    • 留言与评论（共有 条评论）
       
    验证码：