CSS filter 属性

访客4年前黑客文章816

filter

将模糊或者颜色偏移等图像效果用于米素,通常用于调整图像,靠山和边框的渲染

css 尺度中已内置一些预界说效果的函数,也可通过url使用SVG滤镜


语法

/* URL to SVG filter */
filter: url(filter.svg#id);

/* <filter-function> values */
filter: blur(5px);
filter: brightness(0.4);
filter: contrast(200%);
filter: drop-shadow(16px 16px 20px blue);
filter: grayscale(50%);
filter: hue-rotate(90deg);
filter: invert(75%);
filter: opacity(25%);
filter: saturate(30%);
filter: sepia(60%);

/* Multiple filters */
filter: contrast(175%) brightness(3%);

/* Global values */
filter: inherit;
filter: initial;
filter: unset;


滤镜属性

需要设定某一函数的值。若是该值无效,函数返回“none“。

url()

url 函数吸收一个XML文件,该文件是一个SVG filter,而且包罗一个ID值 来指定哪一个滤镜

filter:url(resources.svg#c1) 

blur()

界说模糊度

可以接受css长度单米,不接受百分比

filter:blur(5px)

brightness()

界说亮度

默以为1, 1-0 逐渐变暗,1以上逐渐变亮

可以是百分比, 不能为负数

contrast()

界说对比度

1-0 逐渐酿成灰黑 1以上颜色逐渐变艳丽

可以是百分比, 不能为负数

drop-shadow()

界说阴影效果,合成在图像下面,参数 和 shadow, box-shadow 相似

和shadow, box-shadow属性不同之处在于通过filter,一些浏览器为了提升性能会提供硬件加速。

传参顺序从左至右:

  水平偏移距离正值右偏,负值左偏(offset-x)。必传

  垂直偏移距离正值向下偏,负值上偏(offset-y)。必传

  一个length值(示意距离尺寸的一种css数据格式) 值越大,越模糊阴影会变得更大更淡.)不允许负值 默以为0 (blur-radius)可选

  一个length值,正值会使阴影扩张和变大,负值会是阴影缩小,默认 0

  color 色值,在Gecko (Firefox), Presto (Opera)和Trident (Internet Explorer)中,会应用color 属性的值,颜色值省略,WebKit中阴影是透明的。

filter:drop-shadow(16px 16px 10px black)

grayscale()

界说灰度

取值0 - 1的数值之间,可设置百分比,不可为负数

filter:grayscale(50%);

hue-rotate()

界说颜色,色相旋转调整

单米 deg

可为负值

filter: hue-rotate(90deg)

invert()

反向输入图,界说转换比例

默认0 0%和100%之间,则是效果的线性乘子。

filter: invert(100%)

opacity()

转化图像的透明水平

类似于css的opacity属性

1-0 逐渐变透明,支持百分比 ,不能为负数

和opacity属性不同之处在于通过filter,一些浏览器为了提升性能会提供硬件加速。

filter: opacity(50%)

saturate()

界说图像饱和度

1-0 至完全不包和,1为正常, 1以上饱和度更高,更艳丽,支持百分比

filter:saturate(369%)

sepia()

界说深褐色的色度

0 - 1 逐渐变为深褐色 支持百分比,不支持负数

filter: sepia(100%)

组合函数

可以将随便数目的函数一起控制渲染,其中有一个不符合规范将所有失效

filter:sepia(100%) saturate(369%) opacity(50%)

兼容性


思源资源网:分类流动

1.阿里云: 本站现在使用的是阿里云主机,平安/可靠/稳固。点击领取2000米代金券、领会最新阿里云产物的种种优惠流动点击进入

相关文章

跳皮筋十种玩法(跳皮筋十种玩法 花式)

我国土壤资源丰富多彩。乃至邻近的2个县也很有可能说彻底不一样的家乡话。她们喜爱甜和辣。可是无论越过西南,大西北,到那个地方。有些人说有一件事是彻底一样的,那便是大家八九十年代的皮筋儿跳健身运动,全国各...

2020年春节快递停发时间表!最新春节快递停运通知 2020春节快递什么时

2020年春节快递停发时间表!最新春节快递停运通知 2020春节快递什么时

2020快递停运时间最新消息!2020年春节放假时间是2020年1月24日到2020年1月30日,基本上各个快递的停运时间都是根据春节过年放假时间来安排的,下面来具体介绍一下。 据各大快递公司公...

宝源丰(宝源丰禽业公司火灾事故图片)

4.5×103kg试题分析:解:直升机取水过程,设绳拉力为T1,空气阻力为f,对水箱水平方向:T1sinθ1-f="0"1分竖直方向:T1cosθ。 网页资讯视频图片知道文库贴吧采购地图更多?搜索答案...

同位语从句的基本结构(同位语从句的用法)

  同音词异义:   1、同位语从句的专有名词:   信念信念,猜疑猜疑,表述,期待期待,念头,新闻新闻,   见解,概率,阐述,观念,心愿,实情,   客观事实客观事实难题服务承诺难题回应汇...

免费接单黑客QQ有哪些?24小时接单的黑客

今天我来跟大家谈论一下关于QQ空间挂马的原理,我试了一下,成功率占80%。 有好多人都问我怎么样才可以做到肉鸡成群,我想了好久,觉得QQ空间挂马可以实现这个。所以我试做了一下, 竟然成功了!~~那我就...

西藏大力推进姓马的名人农牧民转移就业

  在西藏拉萨林周县格桑塘现代农牧产业示范园里,奶牛养殖车间的工人正忙着为奶牛投放饲料,一面巨大的电子屏幕实时展示着车间的生产情况。   “没想到,牛还能这样养!”看着现代化的养殖大棚,在此工作的松...