Photoshop 里最没有用处的一种功能——但也有人说是使其超出竞争对手的一种功能——就是混合模式 (blend mode)。混合模式是指两个像素点叠落到一起,用不同的方法混合它们的颜色。比如,darken 颜色混合模式,就是选择两个像素中颜色更深的一个输出。当将混合模式运用到整张图片上时,会产生让人惊讶的效果。
undefined
虽然并不是 Adobe 的 Photoshop 发明了混合模式,但它的实现效果是最真实的。可现在,你不需要使用 Photoshop 来运用混合模式美化你的图片,因为 CSS3 里提供里动态的实现这种效果的方法。
undefined
undefined
做为 CSS3 的新特征之一,各种浏览器对
属性的还在改进中。对于早期的浏览器,需要在 CSS 里使用,或激活实验性设置。根据报告显示,Firefox 30,Chrome 35,Opera 22 都是已经支持这个特征。
- background-blend-mode
undefined
虽然 IE 现在仍然没有实现对混合模式的支持,但混合模式是一种非常好的提高页面美观的工具,我们可以考虑在页面中使用它。
undefined
的用法
- background-blend-mode
undefined
CSS3 里提供了大量的混合模式的用法,但对于我们来说最有用处的一种用法是使用
。这个属性能让我们混合两张图片或混合一个图片和一种背景色。
- background-blend-mode
undefined
在下面的演示中我们将使用如下代码:
undefined
- <div class="blend">
- </div>
undefined
使用的 CSS:
undefined
- .blend {
- width: 782px;
- height: 540px;
- background: #3db6b8 url("lighthouse.jpg") no - repeat center center;
- }
undefined
下面我们就可以添加混合模式效果了。
undefined
我们需要添加另外一个 CSS 类,比如对于 "multiply" 模式:
undefined
- <div class="blend multiply">
- </div>
undefined
然后我们再写一个 CSS 规则:
undefined
- .blend.multiply {
- background - blend - mode: multiply;
- }
undefined
undefined
, 正如名称示意的,用混合颜色来增重基色,产生一种更深的颜色。用黑色正片叠底的结果是黑色,用白色正片叠底的结果是图片没有任何变化。
undefined
- background - blend - mode: multiply;
undefined
undefined
是两个像素色的逆向正片叠底。滤色和正片叠底正好相反,使用白色进行虑色会产生白色,使用黑色虑色的结果是图像没有变化。
undefined
- background - blend - mode: screen;
undefined
undefined
是一种复杂的混合模式。颜色变深的程度依赖于基色:浅色变的更浅,深色变得更深。
undefined
- background - blend - mode: overlay;
undefined
undefined
, 让图片更暗。它会选择使用两个重叠的像素中颜色更深的那个。
undefined
- background - blend - mode: darken;
undefined
undefined
跟变暗相反,模式会选择另个叠加的像素中颜色较轻的那个。
undefined
- background - blend - mode: lighten;
undefined
undefined
减小对比度使基色变亮以反映混合色。
undefined
- background - blend - mode: color - dodge;
undefined
undefined
跟颜色减淡相反,通过增加对比度使基色变暗以反映混合色。
undefined
- background - blend - mode: color - burn;
undefined
undefined
"强光" 模式将产生一种强光照射的效果。如果 "混合色" 颜色 "基色" 颜色的像素更亮一些,那么 "结果色" 颜色将更亮;如果 "混合色" 颜色比 "基色" 颜色的像素更暗一些,那么 "结果色" 将更暗。
undefined
- background - blend - mode: hard - light;
undefined
undefined
跟强光模式类似,"柔光" 模式会产生一种柔光照射的效果。如果 "混合色" 颜色比 "基色颜色的像素更亮一些,那么" 结果色 "将更亮;如果" 混合色 "颜色比" 基色 "颜色的像素更暗一些,那么" 结果色 " 颜色将更暗,使图像的亮度反差增大。
undefined
- background - blend - mode: soft - light;
undefined
undefined
"差值" 模式是将从图像中 "基色" 颜色的亮度值减去 "混合色" 颜色的亮度值,如果结果为负,则取正值,产生反相效果。由于黑色的亮度值为 0,白色的亮度值为 255,因此用黑色着色不会产生任何影响,用白色着色则产生被着色的原始像素颜色的反相。
undefined
- background - blend - mode: difference;
undefined
undefined
与 "差值" 模式相似,但是具有高对比度和低饱和度的特点。比用 "差值" 模式获得的颜色要柔和、更明亮一些。
undefined
- background - blend - mode: exclusion;
undefined
undefined
只用 "混合色" 颜色的色相值进行着色,而使饱和度和亮度值保持不变。当 "基色" 颜色与 "混合色" 颜色的色相值不同时,才能使用描绘颜色进行着色
undefined
- background - blend - mode: hue;
undefined
undefined
, "饱和度" 模式的作用方式与 "色相" 模式相似,它只用 "混合色" 颜色的饱和度值进行着色,而使色相值和亮度值保持不变。当 "基色" 颜色与 "混合色" 颜色的饱和度值不同时,才能使用描绘颜色进行着色处理
undefined
- background - blend - mode: saturation;
undefined
undefined
能够使用 "混合色" 颜色的饱和度值和色相值同时进行着色,而使 "基色" 颜色的亮度值保持不变。"颜色" 模式模式可以看成是 "饱合度" 模式和 "色相" 模式的综合效果。该模式能够使灰色图像的阴影或轮廓透过着色的颜色显示出来,产生某种色彩化的效果。
undefined
- background - blend - mode: color;
undefined
undefined
能够使用 "混合色" 颜色的亮度值进行着色,而保持 "基色" 颜色的饱和度和色相数值不变。其实就是用 "基色" 中的 "色相" 和 "饱和度" 以及 "混合色" 的亮度创建 "结果色"。此模式创建的效果是与 "颜色" 模式创建的效果相反
undefined
- background - blend - mode: luminosity;
undefined
undefined
分享:来源: http://www.webhek.com/post/css-blend-mode.html