作者简介:饿了么前端工程师,擅长人机交互,半个萌妹子,半个女汉子,喜欢画画,P图。欢迎关注知乎专栏 互联网产品设计 ,欢迎勾搭~
我们通常会通过PS,美图秀秀等来编辑照片,制作比较符合意境的的效果图片(图骗),但是编辑器和PS的切换是有成本的,如果能在编辑器中快捷并且批量的处理图片岂不是很好。这篇文章没有多么高深的代码,只是一些平时容易忽略并且很受用的小技巧。
P图怎么能少了滤镜呢,css提供了很多种滤镜:
添加阴影效果可不只有text-shadow和box-shadow哦,text-shadow是为文字添加阴影,box-shadow给一个元素添加阴影,drop-shadow在图片是非png情况下和box-shadow有些相似,然而png图片才是她大放异彩的地方
拿一张jpg图片来举个栗子看下drop-shadow 和 box-shadow的区别:
- //从左往右依次是原图,添加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图片的表现吧,左边为原图:
- .drop-shadow-png{
- -webkit-filter: drop-shadow(10px 10px 10px rgba(255,235,59,0.74));
- }
因为png图片背景是透明的,所以drop-shadow直接作用于图片的内容,图中的小女孩是不是更萌了呢。
如果想要个老照片效果
- .sepia-50{
- -webkit-filter: sepia(50%);
- }
- .sepia-100{
- -webkit-filter: sepia(100%)
- }
- //safari浏览器不支持
参数可以是小数也可以是百分比,为0的时候是左边原图的效果,1或100%是最右的效果图哦
背景图片太清晰有喧宾夺主之嫌了?可以设置模糊的效果啊
- .blur{
- -webkit-filter: blur(3px);
- }
blur用来给图像设置高斯模糊。参数值设定高斯函数的标准差,或者是屏幕上以多少像素融在一起,这个值设置为百分比除外的css长度值,默认是0效果为左边的原图,值越大越模糊,上面的图片设置成100px时就什么都没有了。
opacity会调整图片的透明度,这个和filter中的opacity效果是一样哒,但是并不是一个属性呢,因为他们是可以叠加使用的
- .opacity-20{
- opacity: 0.2;
- }
- .filter-opacity-20{
- filter:opacity(0.2)
- }
- .opacity-both{
- opacity: 0.2;
- filter:opacity(0.2)
- }
他们接受的参数也是有一些差别的,opacity只能接受小数,filter:opactiy()既可以接受小数也可以接受百分比,值越小越透明。
hue-rotate通过改变图片的色相来改变图片
- .hue-rotate-90{
- -webkit-filter: hue-rotate(90deg);
- }
- .hue-rotate-270{
- -webkit-filter: hue-rotate(270deg);
- }
hue-rotate 参数是一个角度值,他会接受这个值并把图片中的颜色的色相做对应的旋转
invert会把图片上的所有颜色进行反转,如果是希望做个相机底片效果,真的是太合适了
- .invert-20{
- filter: invert(20%);
- }
- .invert-100{
- filter: invert(100%)
- }
和hue-rotate相比,直接反转就用不着接受颜色变化的角度了,但是你可以设置0~100%来控制反转的程度
色彩三要素色相,明度,饱和度。饱和度也即颜色的纯度,彩度。无彩色的色饱和度为0,也就是上面的grayscale灰度值为1的时候,饱和度越高,颜色中的灰度越低。
- .saturate-50{
- filter: saturate(50%);
- }
- .saturate-200{
- filter: saturate(200%);
- }
饱和度100%时为左一原图,接受大于100%的值。
说完了色相和饱和度再来看看brightness,brightness给图片应用一种线性乘法来调整整个图片的亮度,效果和手机电脑上的的亮度调节是一样的
- .brightness-4{
- filter:brightness(40%)
- }
- .brightness-8{
- filter:brightness(80%)
- }
brightness的参数可以用百分比来表示也可以用小数来表示,当参数值为0的时候整个图片都是黑色的了,超过100%的时候比原图更亮一些
contrast用来调整图像的对比度
- .contrast-50 {
- filter: contrast(50%)
- }
- .contrast-200{
- filter:contrast(200%)
- }
contrast的参数接受百分比形式的数值也接受小数形式的,值为0 的时候是整个图片都是灰黑色的,为1时是原图,值越大对比度越大,默认值为1。
有格调的灰度模式开启
- .gray-scale-50{
- filter:grayscale(50%)
- }
- .gray-scale-100{
- filter:grayscale(100%)
- }
grayscale的参数接受百分比和小数,默认参数是100%,完全灰度,1以内的值越大越靠近完全灰度,大于等于1的值的效果是一样哒
CSS3的混合模式决定了多个图片/图层叠加在一起的时候显示的效果。关于混合模式的算法可以在维基百科上了解。不同的模式值对应了不同的算法,最后决定了图片混合模式效果。相关的两个属性是mix-blend-mode和background-blend-mode,background-blend-mode主要是作用于同一个background属性下的背景图片或者背景色。
混合模式的值的对应效果可以完全类比PS中图层模式效果,他们的对应关系是:
mix-blend-mode主要作用是把目标元素和其下方的背景元素混合。
图片来自于 caniuse.com
快速开始:
这是两张原图
- <div class="mix-blend-mode">
- <img src="./images/girl.jpg" alt="girl.jpg">
- <img src="./images/minion.jpg" alt="minion.jpg">
- </div>
- /*让两张图片重叠在一起*/
- .mix-blend-mode{
- position:relative
- }
- .mix-blend-mode img{
- position:absolute
- }
然后就可以给小黄人图片添加mix-blend-mode啦,因为小女孩图片排在小黄人下面,所以如果给小女孩图片添加效果的话是看不到任何效果的。
- .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;
- }
- .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;
- }
- .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中的样式,并且给他们的父元素设置蓝色背景,然后,各种艺术形态的小黄人出现了!
- .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;
- }
兼容性如下:
图片来自于 caniuse.com
background-blend-mode顾名思义是作用于background-image,background-color的。并且是写在一个background属性后面的图片,颜色哦。
- .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效果就不贴代码啦。
其实这些功能综合运用会有很神奇的效果,后续会写文章介绍哒。
2
来源: http://www.tuicool.com/articles/iMvMryi