修出雅观的肖像,css3中filter的种种特效

什么样用 CSS 修出美观的照片

2017/12/01 · CSS ·
照片

原版的书文出处:
如梦令   

咱俩平常会通过PS,美图秀秀等来编排照片,制作相比吻合意境的的效果图片(图骗),不过编辑器和PS的切换是有成本的,假设能在编辑器中十分的快并且批量的拍卖图片岂不是很好。那篇小说没有多么高深的代码,只是某些平日容易忽视并且很受用的小技巧。

不久前随地看到有人在说CSS3的filter亚洲必赢官网,一向从未时间本人去测试那意义。今天好不简单抽出时间学习这几个CSS3的Filter。不整不掌握啊,一整才让本人深感震惊,太强大了。我们先来看个功效呢:

  在落实特定显示效果的页面中,css的filter属性是一种强大的工具。它能让大家的页面越发地特性化并缩减PS方面包车型客车行事。filter的属性值首要有以下十种:

css3中的filter属性能够算得简单易用且强大,这一个成效功用在图纸上实现部分特效(也得以成效在vidio上,此处只谈谈图片特效)。

修图利器之 CSS Filters

P图怎么能少了滤镜呢,css提供了很三种滤镜:

  1. drop-shadow
  2. sepia
  3. blur
  4. hue-rotate
  5. invert
  6. brightness
  7. contrast
  8. opacity
  9. grayscale
  10. saturate
    1. blur
    2. 修出雅观的肖像,css3中filter的种种特效。grayscale
    3. sepia
    4. saturate
    5. hue-rotate
    6. invert
    7. brightness
    8. contrast
    9. opacity
    10. drop-shadow

浏览器包容性

drop-shadow 降低式阴影

添加影子效果可不光有text-shadow和box-shadow哦,text-shadow是为文字添加阴影,box-shadow给三个因素添加阴影,drop-shadow在图纸是非png景况下和box-shadow有个别相似,但是png图片才是他大放异彩的地点

拿一张jpg图片来举个栗子看下drop-shadow 和 box-shadow的分别:

亚洲必赢官网 1

//从左往右依次是原图,添加drop-shadow-jpg,添加box-shadow
.drop-shadow-jpg{ -webkit-filter: drop-shadow(10px 10px 10px
rgba(255,235,59,0.74)); } .box-shadow{ box-shadow: 10px 10px 10px
rgba(255,235,59,0.74); }

1
2
3
4
5
6
7
//从左往右依次是原图,添加drop-shadow-jpg,添加box-shadow
.drop-shadow-jpg{
    -webkit-filter: drop-shadow(10px 10px 10px rgba(255,235,59,0.74));
}
.box-shadow{
    box-shadow: 10px 10px 10px rgba(255,235,59,0.74);
}

drop-shadow显明更温和一些,并且图片的下面和左边也是有黑影的哦。

再来看下drop-shadow在png图片的变现吧,右边为原图:

亚洲必赢官网 2

.drop-shadow-png{ -webkit-filter: drop-shadow(10px 10px 10px
rgba(255,235,59,0.74)); }

1
2
3
.drop-shadow-png{
    -webkit-filter: drop-shadow(10px 10px 10px rgba(255,235,59,0.74));
}

因为png图片背景是透明的,所以drop-shadow直接效果于图片的剧情,图中的小女孩是还是不是更萌了吗。

亚洲必赢官网 3

  本文使用的图纸如下:

  近日各大浏览器对于css3的协作已经丰富好了,最新版本都足以支撑css3,老版本的ie9以下的照旧不帮忙,可是那不是根本,微软都准备放任那几个老古董了。别的ie的滤镜也是能够完成的,会另加研究。

sepia 花枝墨,中紫粉红白,深血红影

如果想要个老照片效果

亚洲必赢官网 4

.sepia-50{ -webkit-filter: sepia(四分之二); } .sepia-100{ -webkit-filter:
sepia(百分之百) } //safari浏览器不支持

1
2
3
4
5
6
7
.sepia-50{
    -webkit-filter: sepia(50%);
}
.sepia-100{
   -webkit-filter: sepia(100%)
}
//safari浏览器不支持

参数可以是小数也得以是比例,为0的时候是左手原图的遵循,1或百分百是最右的效果图哦

自笔者想光看下边包车型地铁机能就能吸引你了,假使你协调入手的话,作者想你更会深感神奇。细一看,这个效应就像photoshop整出来的均等,其实是真是如此的,有好多成效都是近乎于photoshop中的特效。可是有一些豪门要求尤其的小心:此处的CSS3
filter和css
filter完全是两样东东。更不是我们平素说的IE滤镜。具体所指的是何许?大家感兴趣的能够点击这里。
本人就不多说了,因为说也说不清楚,作者只想和豪门一道研讨的是怎样使用这些“CSS3
Filter”。那大家初阶吧。

亚洲必赢官网 5

现行反革命正规中帮忙的效果有:

blur 模糊

背景图片老聃晰有反客为主之嫌了?能够设置模糊的意义啊

亚洲必赢官网 6

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

1
2
3
.blur{
    -webkit-filter: blur(3px);
}

blur用来给图像设置高斯模糊。参数值设定高斯函数的标准差,大概是荧屏上以多少像素融在一道,这一个值设置为百分比除外的css长度值,暗许是0效果为左侧的原图,值越大越模糊,上边的图片设置成100px时就什么都没有了。

Filters首假如利用在图纸上,以贯彻部分神效。(就算他们也能运用于video上),可是我们在些只来谈谈图片上的采用。

  一、blur属性。blur的采纳格式一般为 filter: blur(1px);
-webkit-filter:
blur(1px); 该属性用来为因素扩张模糊效果,展现效果如下:

  • grayscale 灰度               值为0-1中间的小数 
  • sepia 洋蓟绿         值为0-1里面包车型大巴小数
  • saturate 饱和度     值为num
  • hue-rotate 色相旋转  值为angle
  • invert 反色        值为0-1之间的小数
  • opacity 折射率     值为0-1里面包车型客车小数
  • brightness 亮度     值为0-1时期的小数
  • contrast 对比度     值为num
  • blur 模糊           值为length
  • drop-shadow 阴影

opacity 透明度

opacity会调整图片的反射率,那个和filter中的opacity效果是一模一样哒,然则并不是叁本性质呢,因为她们是足以附加使用的

亚洲必赢官网 7

.opacity-20{ opacity: 0.2; } .filter-opacity-20{ filter:opacity(0.2) }
.opacity-both{ opacity: 0.2; filter:opacity(0.2) }

1
2
3
4
5
6
7
8
9
10
.opacity-20{
    opacity: 0.2;
}
.filter-opacity-20{
    filter:opacity(0.2)
}
.opacity-both{
    opacity: 0.2;
    filter:opacity(0.2)
}

她们承受的参数也是有一对差别的,opacity只可以承受小数,filter:opactiy()既可以承受小数也得以接受百分比,值越小越透明。

语法

亚洲必赢官网 8

用法是业内的CSS写法,如:

hue-rotate 色相旋转

hue-rotate通过变更图片的色相来改变图片

亚洲必赢官网 9

.hue-rotate-90{ -webkit-filter: hue-rotate(90deg); } .hue-rotate-270{
-webkit-filter: hue-rotate(270deg); }

1
2
3
4
5
6
.hue-rotate-90{
    -webkit-filter: hue-rotate(90deg);
}
.hue-rotate-270{
    -webkit-filter: hue-rotate(270deg);
}

hue-rotate
参数是三个角度值,他会经受这几个值并把图片中的颜色的色相做相应的转动

elm {        filter: none |[]*      }

  二、grayscale属性。grayscale的采纳格式一般为 filter:
grayscale(0.6); -webkit-filter:
grayscale(0.6); 该属性用来安装成分的灰度,能够使彩色图片变为黑白,呈现效果如下:

-webkit-filter: blur(2px);

测试浏览器为chrom浏览器44.0版本,示例图片中上方为原图,下方为加fifter效果后的图片。

invert 反转

invert会把图片上的具备颜色举办反转,假设是意在做个相机底片效果,真的是太对劲了

亚洲必赢官网 10

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

1
2
3
4
5
6
.invert-20{
    filter: invert(20%);
}
.invert-100{
    filter: invert(100%)
}

和hue-rotate相比较,直接反转就富余接受颜色变化的角度了,不过你能够设置0~百分百来支配反转的水准

其暗中认可值是none,他不享有继承性,当中filter-function贰个有着以下值可选:

亚洲必赢官网 11

grayscale灰度

  假若采用该意义参数里没值的话将会以百分之百来渲染,取值0-第11中学间为不一样的灰度。上边实例为百分之百的渲染:-webkit-filter:grayscale(1)
;

亚洲必赢官网 12

saturate 饱和度

情调三要素色相,明度,饱和度。饱和度也即颜色的纯度,彩度。无彩色的色饱和度为0,也便是地点的grayscale灰度值为1的时候,饱和度越高,颜色中的灰度越低。

亚洲必赢官网 13

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

1
2
3
4
5
6
.saturate-50{
    filter: saturate(50%);
}
.saturate-200{
    filter: saturate(200%);
}

饱和度百分百时为左一原图,接受大于百分之百的值。

grayscale灰度

  三、sepia属性。sepia的利用格式一般为 filter: sepia(0.6);
-webkit-filter:
sepia(0.6); 该属性用来设置成分的深红,呈现效果如下:

sepia

  淡紫,就是美图秀秀里有个怀旧效果的那种效果,取值也是0-1,-webkit-filter:sepia(1)
;

亚洲必赢官网 14

brightness 亮度

说完了色相和饱和度再来看看brightness,brightness给图片采纳一种线性乘法来调整总体图片的亮度,效果和手提式有线电话机处理器上的的亮度调节是千篇一律的

亚洲必赢官网 15

.brightness-4{ filter:brightness(40%) } .brightness-8{
filter:brightness(80%) }

1
2
3
4
5
6
.brightness-4{
    filter:brightness(40%)
}
.brightness-8{
    filter:brightness(80%)
}

brightness的参数能够用百分比来表示也能够用小数来代表,当参数值为0的时候整个图片都是青色的了,超过百分百的时候比原图更亮一些

sepia银色(求专业指引翻译)

亚洲必赢官网 16

saturate饱和度

  该属性改变图片的饱和度,取值范围为数字即可,暗中认可值百分之百,示例为800%:-webkit-saturate(6)
;

亚洲必赢官网 17

contrast 对比度

contrast用来调动图像的相比较度

亚洲必赢官网 18

.contrast-50 { filter: contrast(50%) } .contrast-200{
filter:contrast(200%) }

1
2
3
4
5
6
.contrast-50 {
    filter: contrast(50%)
}
.contrast-200{
    filter:contrast(200%)
}

contrast的参数接受百分比格局的数值也接受小数方式的,值为0
的时候是全方位图片都是灰墨绿的,为1时是原图,值越大相比较度越大,私下认可值为1。

saturate饱和度

  四、saturate属性。saturate的采纳格式一般为: filter:
saturate(0.15); -webkit-filter:
saturate(0.15); 该属性常用来改变图片的饱和度,呈现效果如下:

hue-rotate色相旋转

  hue-rotate用来改变图片的色相,私下认可值为0deg,取值为angle,示例:-webkit-filter:hue-rotate(180deg) 

亚洲必赢官网 19

grayscale 灰度格局

有格调的灰度形式开启

亚洲必赢官网 20

.gray-scale-50{ filter:grayscale(50%) } .gray-scale-100{
filter:grayscale(100%) }

1
2
3
4
5
6
.gray-scale-50{
    filter:grayscale(50%)
}
.gray-scale-100{
    filter:grayscale(100%)
}

grayscale的参数接受百分比和小数,私下认可参数是百分之百,完全灰度,1以内的值越大越临近完全灰度,大于等于1的值的效益是相同哒

hue-rotate色相旋转

亚洲必赢官网 21

invert反色

  invert的功用就和照片底片有点相像,示例:-webkit-filter:invert(1) 

亚洲必赢官网 22

修图利器之 Blend Modes

CSS3的备位充数形式决定了多个图片/图层叠加在一起的时候显得的成效。关于混合形式的算法能够在维基百科上询问。分裂的形式值对应了分裂的算法,最后决定了图片混合形式作用。相关的多少个特性是mix-blend-mode和background-blend-mode,background-blend-mode主假设法力于同叁个background属性下的背景图片可能背景象。

混合方式的值的对应效果可以完全类比PS中图层形式效用,他们的呼应关系是:

  1. normal 平常情势
  2. multiply 正片叠底情势
  3. screen 滤色方式
  4. overlay 叠加形式
  5. darken 变暗方式
  6. lighten 变亮方式
  7. color-burn 颜色加深方式
  8. hard-light 强光形式
  9. soft-light 柔光情势
  10. difference 差值格局
  11. exclusion 排除方式
  12. hue 色相方式
  13. saturation 饱和度情势
  14. color 颜色方式
  15. luminosity 亮度情势

invert反色

  五、hue-rotate属性。hue-rotate的行使格式一般为: filter:
hue-rotate(189deg); -webkit-filter:
hue-rotate(189deg); 该属性常用来改变图片的色相,展现效果如下:

opacity透明度

  那几个天性日常遭逢,示例:-webkit-filter:opacity(0.3)

亚洲必赢官网 23 

mix-blend-mode 式

mix-blend-mode首要效能是把对象成分和其下方的背景成分混合。

亚洲必赢官网 24

图形源于于caniuse.com

高效开首:

亚洲必赢官网 25

那是两张原图

<code><div class=”mix-blend-mode”> <img
src=”./images/girl.jpg” alt=”girl.jpg”/><img
src=”./images/minion.jpg” alt=”minion.jpg”/></div>
</code>

1
2
3
<code><div class="mix-blend-mode">
        <img src="./images/girl.jpg" alt="girl.jpg"/><img src="./images/minion.jpg" alt="minion.jpg"/></div>
</code>

/*让两张图片重叠在一道*/ .mix-blend-mode{ position:relative }
.mix-blend-mode img{ position:absolute }

1
2
3
4
5
6
7
/*让两张图片重叠在一起*/
.mix-blend-mode{
    position:relative
}
.mix-blend-mode img{
    position:absolute
}

下一场就足以给小黄种人图片添加mix-blend-mode啦,因为小女孩图片排在小白人下边,所以如果给小女孩图片添加效果的话是看不到其余功能的。

亚洲必赢官网 26

.mix-normal{ mix-blend-mode: normal; } .mix-color{ mix-blend-mode:
color; } .mix-color-burn{ mix-blend-mode:color-burn; } .mix-color-dodge{
mix-blend-mode: color-dodge; } .mix-darken{ mix-blend-mode: darken; }
.mix-difference{ mix-blend-mode: difference; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.mix-normal{
    mix-blend-mode: normal;
}
.mix-color{
    mix-blend-mode: color;
}
.mix-color-burn{
    mix-blend-mode:color-burn;
}
.mix-color-dodge{
    mix-blend-mode: color-dodge;
}
.mix-darken{
    mix-blend-mode: darken;
}
.mix-difference{
    mix-blend-mode: difference;
}

亚洲必赢官网 27

.mix-exclusion{ mix-blend-mode: exclusion; } .mix-hard-light{
mix-blend-mode: hard-light; } .mix-hue{ mix-blend-mode: hue; }
.mix-inherit{ mix-blend-mode: inherit; } .mix-initial{ mix-blend-mode:
initial; } .mix-lighten{ mix-blend-mode: lighten; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.mix-exclusion{
    mix-blend-mode: exclusion;
}
.mix-hard-light{
    mix-blend-mode: hard-light;
}
.mix-hue{
    mix-blend-mode: hue;
}
.mix-inherit{
    mix-blend-mode: inherit;
}
.mix-initial{
    mix-blend-mode: initial;
}
.mix-lighten{
    mix-blend-mode: lighten;
}

亚洲必赢官网 28

.mix-luminosity{ mix-blend-mode: luminosity; } .mix-overlay{
mix-blend-mode: overlay; } .mix-saturation{ mix-blend-mode: saturation;
} .mix-screen{ mix-blend-mode: screen; } .mix-soft-light{
mix-blend-mode: soft-light; } .mix-unset{ mix-blend-mode: unset; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.mix-luminosity{
    mix-blend-mode: luminosity;
}
.mix-overlay{
    mix-blend-mode: overlay;
}
.mix-saturation{
    mix-blend-mode: saturation;
}
.mix-screen{
    mix-blend-mode: screen;
}
.mix-soft-light{
    mix-blend-mode: soft-light;
}
.mix-unset{
    mix-blend-mode: unset;
}

添加了mix-blend-mode属性的图纸除了能够对其下部的图形叠加,还是可以对其背景观叠加,左一为原图,依次给左边4张图片添加上面css中的样式,并且给他们的父成分设置中灰背景,然后,各样艺术形象的小黄种人出现了!

亚洲必赢官网 29

.mix-background-lighten{ mix-blend-mode: lighten; }
.mix-background-screen{ mix-blend-mode: screen; }
.mix-background-difference{ mix-blend-mode: difference; }
.mix-background-luminosity{ mix-blend-mode: luminosity; }

1
2
3
4
5
6
7
8
9
10
11
12
.mix-background-lighten{
    mix-blend-mode: lighten;
}
.mix-background-screen{
    mix-blend-mode: screen;
}
.mix-background-difference{
    mix-blend-mode: difference;
}
.mix-background-luminosity{
    mix-blend-mode: luminosity;
}

opacity透明度

亚洲必赢官网 30

brightness亮度

  改变图片的亮度,暗许值为百分之百,示例:-webkit-filter:brightness(0.5) 

亚洲必赢官网 31

background-blend-mode

包容性如下:

亚洲必赢官网 32
图片来源于于caniuse.com

background-blend-mode顾名思义是效果于background-image,background-color的。并且是写在贰个background属性前面包车型大巴图样,颜色哦。

亚洲必赢官网 33

.background-blend-mode-self{ background: url(./images/g.jpg) #673AB7
no-repeat; background-blend-mode: unset; } .background-blend-mode-color{
background: url(./images/g.jpg) #673AB7 no-repeat;
background-blend-mode: screen; } .background-blend-mode-luminosity{
background: url(./images/g.jpg) #673AB7 no-repeat;
background-blend-mode: luminosity; } .background-blend-mode-exclusion{
background: url(./images/g.jpg) #673AB7 no-repeat;
background-blend-mode: exclusion; } .background-blend-mode-overlay{
background: url(./images/g.jpg) #673AB7 no-repeat;
background-blend-mode: overlay; } .background-blend-mode-soft-light{
background: url(./images/g.jpg) #673AB7 no-repeat;
background-blend-mode: soft-light; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
.background-blend-mode-self{
    background: url(./images/g.jpg) #673AB7 no-repeat;
    background-blend-mode: unset;
}
.background-blend-mode-color{
    background: url(./images/g.jpg) #673AB7 no-repeat;
    background-blend-mode: screen;
}
.background-blend-mode-luminosity{
    background: url(./images/g.jpg) #673AB7 no-repeat;
    background-blend-mode: luminosity;
}
.background-blend-mode-exclusion{
    background: url(./images/g.jpg) #673AB7 no-repeat;
    background-blend-mode: exclusion;
}
.background-blend-mode-overlay{
    background: url(./images/g.jpg) #673AB7 no-repeat;
    background-blend-mode: overlay;
}
.background-blend-mode-soft-light{
    background: url(./images/g.jpg) #673AB7 no-repeat;
    background-blend-mode: soft-light;
}

字数有限,其余的background-blend-mode效果就不贴代码啦。

brightness亮度

  六、invert属性。invert的运用格式一般为: filter: invert(二分一);
-webkit-filter:
invert(52%); 该属性用来达成反色,invert做出来的功力就像大家照相机底面包车型大巴效劳一样,彰显效果如下:

contrast对比度

  那些天性取值和饱和度saturate类似,示例500%:-webkit-filter:contrast(5) 

亚洲必赢官网 34

代码地址

  • 怎么用CSS修出赏心悦目的肖像

contrast对比度

亚洲必赢官网 35

blur模糊

  那本性格改变图片的清晰度,暗中认可值为0,示例:-webkit-filter:blur(1px) 

亚洲必赢官网 36

参考文献

  • css
    filters
  • Blend modes – Wikipedia

实则那几个功效综合运用会有很神奇的效应,后续会写文章介绍哒。

1 赞 收藏
评论

亚洲必赢官网 37

blur模糊

  七、brightness属性。brightness的利用格式一般为: filter:
brightness(300%); -webkit-filter:
brightness(300%); 该属性用来安装图片的亮度,显示效果如下:

drop-shadow阴影

  这几个就像于box-shadow,给图片加阴影,示例:-webkit-filter:drop-shadow(10px
10px 10px #000)

亚洲必赢官网 38

当然,添加多个属性也是可以的,示例:-webkit-filter:saturate(10) hue-rotate(500deg) grayscale(0.3) sepia(0.7) contrast(2.5) invert(0.2) brightness(1.2);

亚洲必赢官网 39

就先这么多了,ie低版本的滤镜效果下次再讨论。

drop-shadow阴影

亚洲必赢官网 40

浏览器的包容性

  八、contrast属性。contrast的选择格式一般为: filter:
contrast(四分之一); -webkit-filter:
contrast(52%); 该属性用来改变图片的相比度,彰显效果如下:

眼下帮衬这些天性的浏览器少得非常,未来只是webkit扶助,而且唯有webkit
nightly版本和Chrome
18.0.976以上以上版本才支撑,所以说,你只要想见见功能就必要下载那三个版本中的多个,作者利用的是Google
Chrome
Canary。

亚洲必赢官网 41

上边大家一同来见证这个意义的兑现进度,首先在页面中有一张图片:

  九、opacity属性。opacity的采纳格式一般为: filter: opacity(三分之一);
-webkit-filter:
opacity(三分之一); 该属性用来设置图片的折射率,突显效果如下:

作者在此处取名为“normal”,表示此图没有其余“filter”效果,那么前边的效能,大家各个将其类名改成对应的功能名。我们看下边包车型大巴代码吧:

亚洲必赢官网 42

一、grayscale灰度

  十、drop-shadow属性。drop-shadow的采纳格式一般为: filter:
drop-shadow(10px 10px 10px yellow); -webkit-filter: drop-shadow(10px
10px 10px
yellow); 用来给图片扩大阴影效果,与box-shadow类似,显示效果如下:

选择那一个特效,会把图纸变成法国红的,也正是说你的图形将唯有二种颜色“水苹果绿”和“青蓝”

亚洲必赢官网 43

.grayscale{-webkit-filter:grayscale(1);}

  ps:opacity在IE下的显得情势:

默认值:100%,

-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=50);

借使您在grayscale()中向来不其它参数值,将会以“百分百”渲染。其作用下图所示:

 

亚洲必赢官网 44

二、sepia

sepia不知情什么译,一时就叫他“蛋黄”,使用那种效益,你的图形好像很古老的一致

.sepia{-webkit-filter:sepia(1);}

默认值:100%,

设若你在sepia()中并未任参数值,将会以“100%”渲染,具体功能如下:

亚洲必赢官网 45

三、saturate饱和度

saturat是用来改变图片的饱和度

.saturate{-webkit-filter:saturate(0.5);}

默认值:100%,

亚洲必赢官网 46

万一大家将其值变大到300%

.saturate{-webkit-filter:saturate(3);}

亚洲必赢官网 47

肆 、hue-rotate色相旋转

hue-rotate用来改变图片的色相

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

默认值:0deg

亚洲必赢官网 48

五、invert反色

invert做出来的功力就好像我们照相机底面包车型客车效劳一样

.invert{-webkit-filter:invert(1);}

默认值:100%

亚洲必赢官网 49

六、opacity透明度

本条就很好精晓了,改变图片的反射率

.opacity{-webkit-filter:opacity(.2);}

默认值:100%

亚洲必赢官网 50

七、brightness亮度

转移图片的亮度

.brightness{-webkit-filter:brightness(.5);}

默认值:100%

亚洲必赢官网 51

八、contrast对比度

改变图片的相比度,整个psd的,都懂这么些意思

.contrast{-webkit-filter:contrast(2);}

默认值:100%

亚洲必赢官网 52

九、blur模糊

一看字面意思就驾驭了,改变图片的清晰度

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

默认值:0

亚洲必赢官网 53

十、drop-shadow阴影

其一很像box-shadow一样的效果,给图片加阴影效果

.drop-shadow{-webkit-filter:drop-shadow(5px5px5px #ccc);}

亚洲必赢官网 54

那么地方正是filter中的十种效用,当然我们可以根据自个儿的必要实行自定义:

.custom{-webkit-filter:saturate(5)hue-rotate(500deg)grayscale(0.3)sepia(0.7)contrast(1.5)invert(0.2)brightness(.9);}

亚洲必赢官网 55

作品权归作者全部。

商业贸易转发请联系作者得到授权,非商业转载请表明出处。

原文:http://www.w3cplus.com/css3/ten-effects-with-css3-filter©w3cplus.com

网站地图xml地图