15种CSS3混合模式让图片产生令人惊艳的效果

注意:只有使用最新版的谷歌浏览器、火狐浏览器,才能正确的显示本文中的演示。

Photoshop里最没有用处的一种功能——但也有人说是使其超出竞争对手的一种功能——就是混合模式(blend mode)。混合模式是指两个像素点叠落到一起,用不同的方法混合它们的颜色。比如,darken颜色混合模式,就是选择两个像素中颜色更深的一个输出。当将混合模式运用到整张图片上时,会产生让人惊讶的效果。

虽然并不是Adobe的Photoshop发明了混合模式,但它的实现效果是最真实的。可现在,你不需要使用Photoshop来运用混合模式美化你的图片,因为CSS3里提供里动态的实现这种效果的方法。

浏览器支持情况

做为CSS3的新特征之一,各种浏览器对background-blend-mode属性的支持情况还在改进中。对于早期的浏览器,需要在CSS里使用浏览器引擎前缀,或激活实验性设置。根据caniuse.com报告显示,Firefox 30,Chrome 35,Opera 22都是已经支持这个特征。

虽然IE现在仍然没有实现对混合模式的支持,但混合模式是一种非常好的提高页面美观的工具,我们可以考虑在页面中使用它。

background-blend-mode的用法

CSS3里提供了大量的混合模式的用法,但对于我们来说最有用处的一种用法是使用background-blend-mode。这个属性能让我们混合两张图片或混合一个图片和一种背景色。

在下面的演示中我们将使用如下代码:

<div class="blend"></div>

使用的CSS:

.blend{
        width:782px;
        height:540px;
        background:#3db6b8 url("lighthouse.jpg") no-repeat center center;
}

下面我们就可以添加混合模式效果了。

我们需要添加另外一个CSS类,比如对于“multiply”模式:

<div class="blend multiply"></div>

然后我们再写一个CSS规则:

.blend.multiply {
        background-blend-mode: multiply;
 }

1、Multiply 正片叠底

Multiply 正片叠底, 正如名称示意的,用混合颜色来增重基色,产生一种更深的颜色。用黑色正片叠底的结果是黑色,用白色正片叠底的结果是图片没有任何变化。

background-blend-mode: multiply;

2、Screen 滤色

Screen 滤色是两个像素色的逆向正片叠底。滤色和正片叠底正好相反,使用白色进行虑色会产生白色,使用黑色虑色的结果是图像没有变化。

background-blend-mode: screen;

3、Overlay 叠加

Overlay 叠加是一种复杂的混合模式。颜色变深的程度依赖于基色:浅色变的更浅,深色变得更深。

background-blend-mode: overlay;

4、Darken 变暗

Darken 变暗, 让图片更暗。它会选择使用两个重叠的像素中颜色更深的那个。

background-blend-mode: darken;

5、Lighten 变亮

跟变暗相反,lighten 变亮模式会选择另个叠加的像素中颜色较轻的那个。

background-blend-mode: lighten;

6、Color dodge 颜色减淡

Color dodge 颜色减淡减小对比度使基色变亮以反映混合色。

background-blend-mode: color-dodge;

7、Color burn 颜色加深

Color burn 颜色加深 跟颜色减淡相反,通过增加对比度使基色变暗以反映混合色。

background-blend-mode: color-burn;

8、Hard light 强光模式

Hard light 强光模式“强光”模式将产生一种强光照射的效果。如果“混合色”颜色“基色”颜色的像素更亮一些,那么“结果色”颜色将更亮;如果“混合色”颜色比“基色”颜色的像素更暗一些,那么“结果色”将更暗。

background-blend-mode: hard-light;

9、Soft light 柔光模式

Soft light 柔光模式跟强光模式类似,“柔光”模式会产生一种柔光照射的效果。如果“混合色”颜色比“基色颜色的像素更亮一些,那么“结果色”将更亮;如果“混合色”颜色比“基色”颜色的像素更暗一些,那么“结果色”颜色将更暗,使图像的亮度反差增大。

background-blend-mode: soft-light;

10、Difference 差值模式

Difference 差值模式 “差值”模式是将从图像中“基色”颜色的亮度值减去“混合色”颜色的亮度值,如果结果为负,则取正值,产生反相效果。由于黑色的亮度值为0,白色的亮度值为255,因此用黑色着色不会产生任何影响,用白色着色则产生被着色的原始像素颜色的反相。

background-blend-mode: difference;

11、Exclusion 排除模式

Exclusion 排除模式与“差值”模式相似,但是具有高对比度和低饱和度的特点。比用“差值”模式获得的颜色要柔和、更明亮一些。

background-blend-mode: exclusion;

12、Hue 色相模式

Hue 色相模式只用“混合色”颜色的色相值进行着色,而使饱和度和亮度值保持不变。当“基色”颜色与“混合色”颜色的色相值不同时,才能使用描绘颜色进行着色

background-blend-mode: hue;

13、Saturation 饱和度模式

Saturation 饱和度模式, “饱和度”模式的作用方式与“色相”模式相似,它只用“混合色”颜色的饱和度值进行着色,而使色相值和亮度值保持不变。当“基色”颜色与“混合色”颜色的饱和度值不同时,才能使用描绘颜色进行着色处理

background-blend-mode: saturation;

14、Color 颜色模式

Color 颜色模式能够使用“混合色”颜色的饱和度值和色相值同时进行着色,而使“基色”颜色的亮度值保持不变。“颜色”模式模式可以看成是“饱合度”模式和“色相”模式的综合效果。该模式能够使灰色图像的阴影或轮廓透过着色的颜色显示出来,产生某种色彩化的效果。

background-blend-mode: color;

15、Luminosity 亮度模式

Luminosity 亮度模式能够使用“混合色”颜色的亮度值进行着色,而保持“基色”颜色的饱和度和色相数值不变。其实就是用“基色”中的“色相”和“饱和度”以及“混合色”的亮度创建“结果色”。此模式创建的效果是与“颜色”模式创建的效果相反

background-blend-mode: luminosity;


赞(52) 打赏
未经允许不得转载:优客志 » 前端设计
分享到:

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏