注意:只有使用最新版的谷歌浏览器、火狐浏览器,才能正确的显示本文中的演示。
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
。这个属性能让我们混合两张图片或混合一个图片和一种背景色。
在下面的演示中我们将使用如下代码:
"blend">
使用的CSS:
.blend
{
width:782px; height:540px; background:#3db6b8 url("lighthouse.jpg") no-repeat center center; }
下面我们就可以添加混合模式效果了。
我们需要添加另外一个CSS类,比如对于“multiply”模式:
"blend multiply">
然后我们再写一个CSS规则:
.blend.multiply
{
background-blend-mode: multiply; }
Multiply 正片叠底
Multiply 正片叠底, 正如名称示意的,用混合颜色来增重基色,产生一种更深的颜色。用黑色正片叠底的结果是黑色,用白色正片叠底的结果是图片没有任何变化。
background-blend-mode: multiply;
Screen 滤色
Screen 滤色是两个像素色的逆向正片叠底。滤色和正片叠底正好相反,使用白色进行虑色会产生白色,使用黑色虑色的结果是图像没有变化。
background-blend-mode: screen;
Overlay 叠加
Overlay 叠加是一种复杂的混合模式。颜色变深的程度依赖于基色:浅色变的更浅,深色变得更深。
background-blend-mode: overlay;
Darken 变暗
Darken 变暗, 让图片更暗。它会选择使用两个重叠的像素中颜色更深的那个。
background-blend-mode: darken;
Lighten 变亮
跟变暗相反,lighten 变亮模式会选择另个叠加的像素中颜色较轻的那个。
background-blend-mode: lighten;
Color dodge 颜色减淡
Color dodge 颜色减淡减小对比度使基色变亮以反映混合色。
background-blend-mode: color-dodge;
Color burn 颜色加深
Color burn 颜色加深 跟颜色减淡相反,通过增加对比度使基色变暗以反映混合色。
background-blend-mode: color-burn;
Hard light 强光模式
Hard light 强光模式“强光”模式将产生一种强光照射的效果。如果“混合色”颜色“基色”颜色的像素更亮一些,那么“结果色”颜色将更亮;如果“混合色”颜色比“基色”颜色的像素更暗一些,那么“结果色”将更暗。
background-blend-mode: hard-light;
Soft light 柔光模式
Soft light 柔光模式跟强光模式类似,“柔光”模式会产生一种柔光照射的效果。如果“混合色”颜色比“基色颜色的像素更亮一些,那么“结果色”将更亮;如果“混合色”颜色比“基色”颜色的像素更暗一些,那么“结果色”颜色将更暗,使图像的亮度反差增大。
background-blend-mode: soft-light;
Difference 差值模式
Difference 差值模式 “差值”模式是将从图像中“基色”颜色的亮度值减去“混合色”颜色的亮度值,如果结果为负,则取正值,产生反相效果。由于黑色的亮度值为0,白色的亮度值为255,因此用黑色着色不会产生任何影响,用白色着色则产生被着色的原始像素颜色的反相。
background-blend-mode: difference;
Exclusion 排除模式
Exclusion 排除模式与“差值”模式相似,但是具有高对比度和低饱和度的特点。比用“差值”模式获得的颜色要柔和、更明亮一些。
background-blend-mode: exclusion;
Hue 色相模式
Hue 色相模式只用“混合色”颜色的色相值进行着色,而使饱和度和亮度值保持不变。当“基色”颜色与“混合色”颜色的色相值不同时,才能使用描绘颜色进行着色
background-blend-mode: hue;
Saturation 饱和度模式
Saturation 饱和度模式, “饱和度”模式的作用方式与“色相”模式相似,它只用“混合色”颜色的饱和度值进行着色,而使色相值和亮度值保持不变。当“基色”颜色与“混合色”颜色的饱和度值不同时,才能使用描绘颜色进行着色处理
background-blend-mode: saturation;
Color 颜色模式
Color 颜色模式能够使用“混合色”颜色的饱和度值和色相值同时进行着色,而使“基色”颜色的亮度值保持不变。“颜色”模式模式可以看成是“饱合度”模式和“色相”模式的综合效果。该模式能够使灰色图像的阴影或轮廓透过着色的颜色显示出来,产生某种色彩化的效果。
background-blend-mode: color;
Luminosity 亮度模式
Luminosity 亮度模式能够使用“混合色”颜色的亮度值进行着色,而保持“基色”颜色的饱和度和色相数值不变。其实就是用“基色”中的“色相”和“饱和度”以及“混合色”的亮度创建“结果色”。此模式创建的效果是与“颜色”模式创建的效果相反
background-blend-mode: luminosity;
BESTCSS3混合模式背景背景图