-webkit-filter

楼主不易，转载声明首先，我们先来看一下-webkit-filter是什么？如下： -webkit-filter有什么用 -webkit-filter的语法结构 -webkit-filter的可选属性 -webkit-filter效果及代码一览那么让我么一起走进css的神奇世界吧

-webkit-filter有什么用

-webkit-filter：CSS的滤镜属性。可以在元素呈现之前，为元素渲染提供效果。常用于图像、背景、边框的渲染。

-webkit-filter的语法结构

-webkit-filter的可选属性

none：默认值，无效果。
blur(px)：高斯模糊。
brightness(%)：亮度。
contrast(%)：对比度。
grayscale(%)：灰度。
hue-rotate(deg)：色相旋转。
invert(%)：反色。
opacity(%)：透明度。
saturate(%)：饱和度。
sepia(%)：褐色。
drop-shadow(radius)：阴影。
url()：URL函数接受一个XML文件，该文件设置了一个SVG滤镜，且可以包含一个锚点来指定一个具体的滤镜元素。

-webkit-filter效果及代码一览

none：

原图片
代码：

.img{ -webkit-filter:none;}

blur()：

图片模糊度5px
代码：

.img{ -webkit-filter: blur(5px);}

brightness()

图片180%的亮度
代码：

.img{ -webkit-filter: brightness(180%);}

contrast()：

图片200%的对比度
代码：

 .img{ -webkit-filter: contrast(200%);}

grayscale()：

图片100%的图片灰度
代码：

.img{ -webkit-filter: grayscale(100%);}

hue-rotate()：

图片色相旋转180度
代码：

.img{ -webkit-filter: hue-rotate(180deg);}

invert()：

图片100%反色
代码：

.img{ -webkit-filter: invert(100%);}

opacity()：

图片50%透明度
代码：

 .img{ -webkit-filter: opacity(50%);}

saturate()：

图片饱和度200%
代码：

.img{ -webkit-filter: saturate(200%);}

sepia()：

图片100%褐色
代码：

.img{ -webkit-filter: sepia(100%);}

drop-shadow()：

图片阴影X偏移10px，y偏移10px，模糊为15px的蓝色阴影
代码：

.img{ -webkit-filter: drop-shadow(10px 10px 15px blue);}

如同ps般的css属性-webkit-filter相关推荐

国家纪念日引起的一个css属性思考 ------ filter属性
前言 2020年4月4日早上10点 , 全国性哀悼活动正式开展 , 在向逝去的生命和前线壮烈牺牲的烈士致哀同时 , 依旧不忘加班 , 如往常打开浏览器 , 然后发现 , 基本上所有的网站都变灰了 , ...
web前端入门学习 css（5）（浮动）（ps切图）（css属性书写顺序）（学成在线网站案例）
文章目录传统网页布局的三种方式标准流(普通流.文档流) 浮动(为什么需要浮动?) 浮动特性浮动元素会脱离标准流,可以与普通流的元素相重叠如果多个盒子都设置了浮动,则它们会按照属性值一行内显示并 ...
CSS属性前的 -webkit, -moz
在CSS属性能中,我们常常能看到-webkit-,-moz-之类的前缀,这种就叫做浏览器私有前缀,是浏览器对于新CSS属性的一个提前支持.-webkit-是webkit内核的,-moz-是Firefo ...
说说filter这个css属性（网站置灰实现）
在2020年4月4日这一天,大家无论打开手机.电脑网页还是APP,都可以看到所有的内容都已经变成了灰色,大家可能还会误以为是网站统一换了一套css样式,不过后面转念一想这么多网站及页面,如果要统一换样 ...
一个css属性让页面变成黑白色之CSS3 filter(滤镜) 属性
2020年是不平凡的一年,在此缅怀一下在抗击新冠肺炎中牺牲的烈士和因为新冠肺炎去世的同胞们,有时候我们需要让网站的页面变成黑白色彩的,只需要一个css属性filter属性即可: filter 属性定义 ...
DW中CSS属性详解
作者:未知来源:5D多媒体在Dreamweaver的CSS样式里包含了W3C规范定义的所有CSS1的属性,Dreamweaver把这些属性分为Type(类型).Background(背 ...
css样式不透明,css属性transparent不透明问题解析
本文章来给各位同学介绍一下关于css属性transparent不透明问题解析,如果你碰到transparent有时候并不是透明的话可参考此方法来解决. 透明往往能产生不错的网页视觉效果,先奉上兼容主流 ...
html5--6-59 其他常用CSS属性
html5--6-59 其他常用CSS属性实例学习要点了解opacity属性:透明度设定了解cursor属性:自定义鼠标样式了解CSS新单位rem和em的区别了解轮廓outline的设置 ...
技巧分享：如何利用CSS属性修改图片颜色？
熟悉前端开发的小伙伴肯定有遇到过这种情况,那就是需要给一个图标或者图片增加一个移动变色等属性,传统做法就是再添加一个颜色的图片文件替换,那么有没有可能直接利用css属性来变更颜色呢? 其实是可以实现的 ...

如同ps般的css属性-webkit-filter

-webkit-filter

-webkit-filter有什么用

-webkit-filter的语法结构

-webkit-filter的可选属性

-webkit-filter效果及代码一览

如同ps般的css属性-webkit-filter相关推荐

最新文章

热门文章