浏览器支持

按照现在情况来讲, 浏览器支持 CSSbackground-blend-mode属性还在不断的完善中。早期版本的浏览器目前还不支持,但caniuse.com报告说在Chrome,Firefox和Opera的最新版本都有良好的支持,使用Safari最快。

目前,基于Chromium的浏览器对CSS混和模式最为支持(background-blend-mode和mix-blend-mode都支持)。为了使Opera也支持,需要在opera地址栏中打开opera:flags,然后开启Enable experimental Web Platform features一项。对于Chrome,你需要通过chrome://flags开启同样的项目。

火狐现在不支持isolation属性,但你可以先享用其它属性,你需要打开about:config,然后搜索属性并开启。Safari和IE浏览器迄今仍不支持这些特性。

除非浏览器对其支持有所改善,最好还是在你的设计中不要将CSS混和模式作为重要的部分,而只是作为既定设计中增强的效果。然而,出于演示的目的,你最好能在同时支持background-blend-mode和mix-blend-mode这两个属性的浏览器中打开链接内容。

background-blend-mode的工作原理

background-blend-mode属性指定了源元素应该怎样把自己的颜色同自己的背景图片和背景颜色混和起来。如果该元素下还有任何其它的层(例如一个使用蓝色背景颜色的section元素),它将不会把自己的颜色与该元素相混合。它只会把自身的颜色与CSS中为其指定的背景图像和颜色混和在一起。

如下例所示:

background-image: url(images/sample.png);
background-color: red;
background-blend-mode: multiply;

如果你正在使用的是多个背景图片,那么你可以分别为它们应用多个背景图片混和模式,例如:

background-image: url(images/sample1.png), url(images/sample2.png);
background-color: blue;
background-blend-mode: screen, overlay;

在上面的例子中, sample1.png图片将会应用screen混和模式,而 sample2.png会应用overlay模式。

怎样使用background-blend-mode属性

CSS3的候选推荐标准中也有一些混合模式的选项,但目前最有用的是背景混合模式 :background-blend-mode。 该属性允许我们混合两个图像,或一个图像和一个背景颜色。

实例如下所示:

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

这个是基类:

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

现在,我们准备添加混合模式。

要做到这一点,我们要添加另一个类到我们的div,例如“multiply”:

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

然后我们将创建第二个样式规则:

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

如果你想看看所有的代码可以在这里下载源文件。替换里面的图片路径你就可以看到展示效果。

正片叠底模式(Multiply)

Multiply, 正如它的名字所暗示的,它以混合色的像素为基础,所以会出现较暗的颜色。 黑色叠加结果为黑色,白色叠加图像不变。

background-blend-mode: multiply;

屏幕模式/滤色(Screen)

与正片叠底模式相反,合成图层的效果是显现两图层中较高的灰阶,而较低的灰阶则不显现(即浅色出现,深色不出现),产生一幅更加明亮的图像。

background-blend-mode: screen;

叠加模式(Overlay)

Overlay 是一个复杂的混合模式。 实际效果取决于基色:浅色变得更浅,暗色变的更暗。

overlay混和模式既有screen中的像素颜色变浅效果,也有multiply中的像素颜色加深效果。究竟使用何种模式,取决于底层的色彩,合成后有些区域图变暗有些区域变亮

background-blend-mode: overlay;

变暗模式(Darken)

此模式的效果取决于源和背景颜色之间更深的(色彩),即混合两图层像素的颜色时,对这二者的RGB值(即RGB通道中的颜色亮度值)分别进行比较,取二者中低的值再组合成为混合后的颜色。

background-blend-mode: darken;

变亮模式(Lighten)

这个模式与darken相反,它的效果取决于源和背景颜色之间更浅的(色彩)。即将两像素的RGB值进行比较后,取高值成为混合后的颜色,因而总的颜色灰度级升高,造成变亮的效果。

background-blend-mode: lighten;

颜色减淡(Color-Dodge)

Color-Dodge模式加亮了背景颜色,从而形成鲜明对比的图像。它减淡亮基色降低对比度,以反映混合色。

background-blend-mode: color-dodge;

颜色加深(Color-Burn)

这种模式加深了背景色,并且增加了源和背景色彩的对比度。即让底层的颜色变暗,有点类似于正片叠底,但不同的是,它会根据叠加的像素颜色相应增加底层的对比度。

background-blend-mode: color-burn;

强光模式(Hard-Light)

Hard light无论是multiply,或者screen 的颜色取决于混合色。这种模式与overlay相反。它在较浅的像素上使用multiply模式,而在较深的像素上使用screen模式。作用效果如同是打上一层色调强烈的光,所以称之为强光。

background-blend-mode: hard-light;

柔光模式(Soft-Light)

这种模式在较深像素上使用multiply模式,而在较浅像素上使用screen模式。与overlay有些相似,但有轻微的不同。作用效果如同是打上一层色调柔和的光,因而被我们称之为柔光。作用时将上层图像以柔光的方式施加到下层。

柔和的光线类似于强光线 ,但不是叠加或过滤的颜色,柔和的光线使用减淡和加深起了一个微妙的影响。

background-blend-mode: soft-light;

差值/差异模式(Difference)

要混合图层双方的RGB值中每个值分别进行比较,用高值减去低值作为合成后的颜色,通常用白色图层合成一图像时,可以得到负片效果的反相图像。用黑色的话不发生任何变化(黑色亮度最低,下层颜色减去最小颜色值0,结果和原来一样),而用白色会得到反相效果(下层颜色被减去,得到补值),其它颜色则基于它们的亮度水平。

background-blend-mode: difference;

排除模式(Exclusion)

exclusion混和模式与difference模式类似,但产生的图像对比度更低一些。

background-blend-mode: exclusion;

色相/色调模式(Hue)

Hue取基色和混合色的颜色亮度和饱和度,并将它们合并。这种模式使用当前层的色相值去替换背景图像的色相值,而饱和度与亮度不变。

background-blend-mode: hue;

饱和度模式(Saturation)

Saturation, 就像hue一样,合并两个具有混合色属性的基本颜色值,然后进行饱和。

saturation用当前层的饱和度去替换背景图像的饱和度,而色相值与亮度不变。

background-blend-mode: saturation;

颜色模式(Color)

color兼有色相和饱和度两种模式,用当前层的色相值与饱和度替换背景图像的色相值和饱和度,而亮度保持不变。

background-blend-mode: color;

亮度/明度模式(Luminosity)

这种模式使用当前层的亮度值去替换背景图像的亮度值,而色相值与饱和度不变。该模式产生的效果与Color模式刚好相反,它根据上层颜色的明度分布来与下层颜色混合。

background-blend-mode: luminosity;

有些人可能觉得不方便准确地记得每一个混合模式的工作原理,所以我们根据它们提供的一般效果,将它们分成几大类,这种方法是非常有用的。我们可以将所有这些模式分为以下几类:

  • 变暗(Darkening):darken, multiply, 和 color-burn模式,各自会按自己的方式,将图像变暗。
  • 变亮(Lightening):lighten, screen 和 color-dodge模式,将图像变得更亮。
  • 对比度(Contrast):overlay, soft-light 和 hard-light模式,将改变图像对比度。
  • 相对(Comparative):difference 和 exclusion模式划分到这个类别中。
  • 成分(Component):hue, saturation, color 和 luminosity模式划分到这个类别中。其他混合模式独立作用于每个颜色通道,而这个类中的模式则从源层挑出某一部分,然后把其它部分和背景层混和。

总结:

在网页中,混合模式非常适合用于创建不同的效果,要是在以前,这种功能是使用Web技术无法给我们的。这是一个即将到来的技术,而且,在写这篇文章的时候,浏览器的支持还不协调,但它只会随着时间的推移变得更好。您可以通过混和模式创造出一些精彩的调整和效果,所以在未来,你将不再需要仅仅为了给页面中的图形元素添加某种效果,而启动一个照片编辑器的应用程序。

注:英文参考自15 CSS blend modes that will supercharge your images 和 Getting to know CSS Blend Modes

《转》15种CSS混合模式让图片产生令人惊艳的效果的更多相关文章

  1. 【基础】这15种CSS居中的方式,你都用过哪几种?

    简言 CSS居中是前端工程师经常要面对的问题,也是基本技能之一.今天有时间把CSS居中的方案汇编整理了一下,目前包括水平居中,垂直居中及水平垂直居中方案共15种.如有漏掉的,还会陆续的补充进来,算做是 ...

  2. 第212天:15种CSS居中的方式,最全了

    CSS居中是前端工程师经常要面对的问题,也是基本技能之一.今天有时间把CSS居中的方案整理了一下,目前包括水平居中,垂直居中及水平垂直居中方案共15种.如有漏掉的,还会陆续的补充进来,算做是一个备忘录 ...

  3. 15种css居中方式

    1 水平居中 1.1 内联元素水平居中 利用 text-align: center 可以实现在块级元素内部的内联元素水平居中.此方法对内联元素(inline), 内联块(inline-block), ...

  4. CSS实现背景图片透明和文字不透明效果

    1.毛玻璃效果:背景图 + 伪类 + flite:blur(3px) width: 500px; height: 300px; line-height: 50px; text-align: cente ...

  5. 探究 CSS 混合模式\滤镜导致 CSS 3D 失效问题

    今天在写一个小的 CSS Demo,一个关于 3d 球的旋转动画,关于 CSS 3D,少不了会使用下面这几个属性: { transform-style: preserve-3d; perspectiv ...

  6. 盘点8种CSS实现垂直居中水平居中的绝对定位居中技术

    Ⅰ.绝对定位居中(Absolute Centering)技术 我们经常用margin:0 auto来实现水平居中,而一直认为margin:auto不能实现垂直居中--实际上,实现垂直居中仅需要声明元素 ...

  7. CSS中对图片(background)的一些设置心得总结

    写网页的时候很多情况需要对图片进行操作,如何在不进行专业的美工裁切操作的情况下而让自己的素材度达到最大的满意度呢,这是一个问题,对于懒得开ps切图的我,通常会直接在网络上download一张图片,直接 ...

  8. CSS常用背景图片定位方法

    CSS背景图片定位其实对于每一位学习前端的同学来说,都已经非常熟悉了.网上铺天盖地的最常见的一种方案就是在父元素中relative,然后子元素absolute.这种方案当然好,不过带来的一个缺点就是会 ...

  9. 关于解决asp.net mvc网站页面Banner图片即时更换css里背景图片url相对路径问题的新方案

    最近在网站首页上想将Banner壁纸给做到后台上传随时更改的效果.遇到问题便是:将上传的图片路径动态添加到首页css代码中,结果尝试了网上提供的思路,更改相对路径,换为url中“../../Conte ...

随机推荐

  1. JavaScript高级程序设计48.pdf

    设备中的键盘事件 任天堂Wii等设备可以通过键码知道用户按下了哪个键 复合事件 复合事件是DOM3级事件新添加的一类事件,用于处理IME的输入序列.IME(Input Method Editor,输入 ...

  2. [ZETCODE]wxWidgets教程七:对话框

    本教程原文链接:http://zetcode.com/gui/wxwidgets/dialogs/ 翻译:瓶哥 日期:2013年12月9日星期一 邮箱:414236069@qq.com 主页:http ...

  3. hdoj 1789 Doing Homework again

    Doing Homework again Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Oth ...

  4. [学习笔记]设计模式之Factory Method

    写在前面 为方便读者,本文已添加至索引: 设计模式 魔法手札索引 在上篇笔记Abstract Factory设计模式中,时の魔导士创建了一系列的FoodFactory,并教会了其中一名霍比特人theC ...

  5. javascript和php中的正则

    正则: var subStr=str.replace(reg/str,'');   不改变原来的字符串返回替换后的字符窜; 如果不用正则,只能替换第一个匹配到的; var subStr=str.mat ...

  6. 20169210《Linux内核原理与分析》第十二周作业

    Return-to-libc 攻击实验 缓冲区溢出的常用攻击方法是用 shellcode 的地址来覆盖漏洞程序的返回地址,使得漏洞程序去执行存放在栈中 shellcode.为了阻止这种类型的攻击,一些 ...

  7. mybatis10 实现类代理对象开发

    mapper实现类代理对象开发 要想让mybatis自动创建dao接口实现类的代理对象,必须遵循一些规则: SqlSession sqlSession = sqlSessionFactory.open ...

  8. RedHat7搭建MongoDB

    yum安装MongoDB 添加MongoDB源# vi /etc/yum.repos.d/mongodb-org-3.0.repo [mongodb-org-3.0] name=MongoDB Rep ...

  9. Tomcat集群,Nginx集群,Tomcat+Nginx 负载均衡配置,Tomcat+Nginx集群

    Tomcat集群,Nginx集群,Tomcat+Nginx 负载均衡配置,Tomcat+Nginx集群 >>>>>>>>>>>> ...

  10. instanceof 含义

    看到一个问题: 把一个字面量对象,变成某个类的实例 function Type() {} var a = {}; ______________ // a instanceof Type === tru ...