http://www.web008.net

修出赏心悦指标肖像

如何用 CSS 修出好看的照片

2017/12/01 · CSS · 照片

原文出处: 如梦令   

我们通常会通过PS,美图秀秀等来编辑照片,制作比较符合意境的的效果图片(图骗),但是编辑器和PS的切换是有成本的,如果能在编辑器中快捷并且批量的处理图片岂不是很好。这篇文章没有多么高深的代码,只是一些平时容易忽略并且很受用的小技巧。

最近到处看到有人在说CSS3的filter一直没有时间自己去测试这效果。今天终于抽出时间学习这个CSS3的Filter。不整不知道呀,一整才让我感到吃惊,太强大了。大家先来看个效果吧:

修图利器之 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

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

sepia 乌贼墨,深褐色,深棕色影

如果想要个老照片效果

图片 4

.sepia-50{ -webkit-filter: sepia(50%); } .sepia-100{ -webkit-filter: sepia(100%) } //safari浏览器不支持

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

参数可以是小数也可以是百分比,为0的时候是左边原图的效果,1或100%是最右的效果图哦

我想光看上面的效果就能吸引你了,要是你自己动手的话,我想您更会感到神奇。细一看,这些效果就像是photoshop整出来的一样,其实是真是这样的,有很多效果都是类似于photoshop中的特效。不过有一点大家需要特别的注意:此处的CSS3 filter和css filter完全是两样东东。更不是我们一直说的IE滤镜。具体所指的是什么?大家感兴趣的可以点击这里。我就不多说了,因为说也说不清楚,我只想和大家一起探讨的是如何使用这个“CSS3 Filter”。那我们开始吧。

blur 模糊

背景图片太清晰有喧宾夺主之嫌了?可以设置模糊的效果啊

图片 5

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

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

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

Filters主要是运用在图片上,以实现一些特效。(尽管他们也能运用于video上),不过我们在些只来讨论图片上的运用。

opacity 透明度

opacity会调整图片的透明度,这个和filter中的opacity效果是一样哒,但是并不是一个属性呢,因为他们是可以叠加使用的

图片 6

.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()既可以接受小数也可以接受百分比,值越小越透明。

语法

hue-rotate 色相旋转

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

图片 7

.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 |[]*      }

invert 反转

invert会把图片上的所有颜色进行反转,如果是希望做个相机底片效果,真的是太合适了

图片 8

.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~100%来控制反转的程度

其默认值是none,他不具备继承性,其中filter-function一个具有以下值可选:

saturate 饱和度

色彩三要素色相,明度,饱和度。饱和度也即颜色的纯度,彩度。无彩色的色饱和度为0,也就是上面的grayscale灰度值为1的时候,饱和度越高,颜色中的灰度越低。

图片 9

.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%);
}

饱和度100%时为左一原图,接受大于100%的值。

grayscale灰度

brightness 亮度

说完了色相和饱和度再来看看brightness,brightness给图片应用一种线性乘法来调整整个图片的亮度,效果和手机电脑上的的亮度调节是一样的

图片 10

.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的时候整个图片都是黑色的了,超过100%的时候比原图更亮一些

sepia褐色(求专业指点翻译)

contrast 对比度

contrast用来调整图像的对比度

图片 11

.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饱和度

grayscale 灰度模式

有格调的灰度模式开启

图片 12

.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的参数接受百分比和小数,默认参数是100%,完全灰度,1以内的值越大越靠近完全灰度,大于等于1的值的效果是一样哒

hue-rotate色相旋转

修图利器之 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反色

mix-blend-mode 式

mix-blend-mode主要作用是把目标元素和其下方的背景元素混合。

图片 13

图片来自于caniuse.com

快速开始:

图片 14

这是两张原图

<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啦,因为小女孩图片排在小黄人下面,所以如果给小女孩图片添加效果的话是看不到任何效果的。

图片 15

.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;
}

图片 16

.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;
}

图片 17

.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中的样式,并且给他们的父元素设置蓝色背景,然后,各种艺术形态的小黄人出现了!

图片 18

.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透明度

background-blend-mode

兼容性如下:

图片 19 图片来自于caniuse.com

background-blend-mode顾名思义是作用于background-image,background-color的。并且是写在一个background属性后面的图片,颜色哦。

图片 20

.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亮度

代码地址

  • 如何用CSS修出好看的照片

contrast对比度

参考文献

  • css filters
  • Blend modes – Wikipedia

其实这些功能综合运用会有很神奇的效果,后续会写文章介绍哒。

1 赞 收藏 评论

图片 21

blur模糊

drop-shadow阴影

浏览器的兼容性

目前支持这个属性的浏览器少得可怜,现在只是webkit支持,而且只有webkit nightly版本和Chrome 18.0.976以上以上版本才支持,所以说,你要是想看到效果就需要下载这两个版本中的一个,我使用的是Google Chrome Canary。

下面我们一起来见证这些效果的实现过程,首先在页面中有一张图片:

我在此处取名为“normal”,表示此图没有任何“filter”效果,那么后面的效果,我们依次将其类名改成对应的效果名。大家看下面的代码吧:

一、grayscale灰度

使用这个特效,会把图片变成灰色的,也就是说你的图片将只有两种颜色“黑色”和“白色”

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

默认值:100%,

如果你在grayscale()中没有任何参数值,将会以“100%”渲染。其效果下图所示:

图片 22

二、sepia

sepia不知道如何译,暂时就叫他“褐色”,使用这种效果,你的图片好像很古老的一样

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

默认值:100%,

如果你在sepia()中没有任参数值,将会以“100%”渲染,具体效果如下:

图片 23

三、saturate饱和度

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

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

默认值:100%,

图片 24

如果我们将其值变大到300%

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

图片 25

四、hue-rotate色相旋转

郑重声明:本文版权归美高梅163888所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。