html背景图片加滤镜,滤镜、图像混合效果如何在css 中实现？

用 Photoshop 的都有用到滤镜来处理图片，那在前端如何用代码来实现呢？

这就得用到 css 滤镜 了。

css 滤镜兼容。

背景知识：

css 滤镜语法：

filter: none | blur() | brightness() | contrast() | drop-shadow() |

grayscale() | hue-rotate() | invert() | opacity() |

saturate() | sepia() | url();

css 滤镜函数：

url()：URL函数接受一个XML文件，该文件设置了 一个SVG滤镜，且可以包含一个锚点来指定一个具体的滤镜元素。如：filter: url(svg-url#element-id)

grayscale(%)：灰度。值定义转换的比例。值为100%则完全转为灰度图像，值为0%图像无变化。值在0%到100%之间，则是效果的线性乘子。若未设置，值默认是 0。

sepia(%)：将图像转换为深褐色。值定义转换的比例。值为100%则完全是深褐色的，值为0%图像无变化。值在0%到100%之间，则是效果的线性乘子。若未设置，值默认是0。

saturate(%)：饱和度。值定义转换的比例。值为0%则是完全不饱和，值为100%则图像无变化。其他值，则是效果的线性乘子。超过100%的值是允许的，则有更高的饱和度。 若值未设置，值默认是1。

hue-rotate(deg)：色相旋转。值为色环角度值。值为0deg，则图像无变化。若值未设置，默认值是0deg。该值虽然没有最大值，超过360deg的值相当于又绕一圈。

invert(%)：反转输入图像。值定义转换的比例。100%的价值是完全反转。值为0%则图像无变化。值在0%和100%之间，则是效果的线性乘子。 若值未设置，值默认是0。

opacity(%)：透明度。值定义转换的比例。值为0%则是完全透明，值为100%则图像无变化。值在0%和100%之间，则是效果的线性乘子，也相当于图像样本乘以数量。 若值未设置，值默认是1。该函数与已有的opacity属性很相似，不同之处在于通过filter，一些浏览器为了提升性能会提供硬件加速。

brightness(%)：亮度。值为百分比，如果值是0%，图像会全黑。值是100%，则图像无变化。其他的值对应线性乘子效果。值超过100%也是可以的，图像会比原来更亮。如果没有设定值，默认是1。

contrast(%)：对比度。值是0%的话，图像会全黑。值是100%，图像不变。值可以超过100%，意味着会运用更低的对比。若没有设置值，默认是1。

blur(px)：高斯模糊。值为像素值， 值越大越模糊；如果没有设定值，则默认是0；这个参数可设置css长度值，但不接受百分比值。

drop-shadow(h-shadow v-shadow blur spread color)：

注意：滤镜的先后顺序不同产生的效果也是不一样的。在使用滤镜动画时，需要大量的计算，不断的重绘页面，属于非常消耗性能的动画，使用时要注意使用场景。记得开启硬件加速及合理使用分层技术

看完基础知识，再来看看几个滤镜的应用吧！

一、不规则投影

应用知识点： url，drop-shadow

代码示例：

box-shadow不适用的情况：1、 半透明图像、背景图像、或者border-image(比如老式的金质像框)。

2、元素设置了点状、虚线或半透明的边框，但没有背景(或者当background-clip 不是border-box 时)；

3、对话气泡，它的小尾巴通常是用伪元素生成的；

4、我们在“切角效果”一节中见过的切角形状；

5、几乎所有的折角效果，包括“折角效果”一节将提到的例子；

6、通过 clip-path 生成的形状，比如“菱形图片”一节中提到的菱形图像。

.note1 {

position: relative;

max-width: 30em;

margin: 50px auto;

padding: 2em;

background: #58a;

background: linear-gradient(-150deg, transparent 1.5em, #58a 0);

border-radius: .5em;

/*借用SVG滤镜平稳退化*/

filter: url(drop-shadow.svg#drop-shadow);

/*css滤镜*/

filter: drop-shadow(12px 12px 20px rgba(0, 0, 0, .5));

}

.note1::before {

content: "";

position: absolute;

top: 0;

right: 0;

background: linear-gradient(to left bottom, transparent 50%, rgba(0, 0, 0, .2) 0, rgba(0, 0, 0, .4)) 100% 0 no-repeat;

width: 1.7em;

height: 3em;

-webkit-transform: translateY(-1.3em) rotate(-30deg);

-moz-transform: translateY(-1.3em) rotate(-30deg);

-ms-transform: translateY(-1.3em) rotate(-30deg);

-o-transform: translateY(-1.3em) rotate(-30deg);

transform: translateY(-1.3em) rotate(-30deg);

transform-origin: bottom right;

border-bottom-left-radius: inherit;

box-shadow: -.2em .2em .3em -.1em rgba(0, 0, 0, .15);

}

二、染色效果

应用知识：sepia，saturate，hue-rotate

代码示例：

.color-tint-filter {

max-width: 640px;

transition: 2s filter, 2s -webkit-filter;

-webkit-filter: sepia() saturate(4) hue-rotate(250deg);

filter: sepia() saturate(4) hue-rotate(250deg);

}

.color-tint-filter:hover {

-webkit-filter: none;

filter: none;

}

此效果亦可以通过 css 混合模式 来实现。

应用知识：background-blend-mode

代码示例：

.color-tint {

display: inline-block;

width: 640px;

height: 440px;

background-size: cover;

background-color: hsl(335, 100%, 50%);

background-blend-mode: luminosity;

transition: 2s background-color;

}

.color-tint:hover {

background-color: transparent;

}

三、毛玻璃效果

应用知识：blur，background 相关知识

代码示例：

“The only way to get rid of a temptation is to yield to it. Resist it, and your soul grows sick with longing for the things it has forbidden to itself, with desire for what its monstrous laws have made monstrous and unlawful.”

— Oscar Wilde, The Picture of Dorian Gray

/*需要借用background-attachment：fixed的属性，让伪元素的紧贴在容器后面*/

/*background-size中cover属性把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。而contain是指：把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。*/

body, main::before {

background: url("img/tiger.jpg") 0 / cover fixed;

}

main {

position: relative;

margin: 0 auto;

padding: 1em;

max-width: 23em;

background: hsla(0,0%,100%,.25) border-box;

/*隐藏多余的模糊元素*/

overflow: hidden;

border-radius: .3em;

box-shadow: 0 0 0 1px hsla(0,0%,100%,.3) inset,

0 .5em 1em rgba(0, 0, 0, 0.6);

text-shadow: 0 1px 1px hsla(0,0%,100%,.3);

}

main::before {

content: '';

position: absolute;

top: 0; right: 0; bottom: 0; left: 0;

/*设置负值的外边距是为了消除边缘模糊消失*/

margin: -30px;

z-index: -1;

-webkit-filter: blur(10px);

filter: blur(10px);

}

blockquote { font-style: italic; }

blockquote cite { font-style: normal; }

四、通过模糊来弱化背景

应用知识： blur、dialog标签使用

代码示例：

O HAI, I’m a dialog. Click on me to dismiss.

Show dialog

放置文本信息

main {

transition: .6s;

background: white;

}

main.de-emphasized {

-webkit-filter: blur(3px);

filter: blur(3px);

}

dialog {

position: fixed;

top: 50%;

left: 50%;

z-index: 1;

width: 10em;

padding: 2em;

margin: -5em;

border: 1px solid silver;

border-radius: .5em;

box-shadow: 0 .2em .5em rgba(0, 0, 0, .5), 0 0 0 100vmax rgba(0, 0, 0, .2);

}

dialog:not([open]) {

display: none;

}