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

15种CSS混合模式让图片产生令人惊艳的效果 如果你曾经广泛地使用过图片编辑应用软件（例如，Adobe Photoshop，Pixelmator，GIMP等），那么你可能对混合模式比较熟悉。如同名称中所暗示的，混合模式是指将上层的图像融入下层图像时 采用的各种模式。根据您所选择的模式，你会看到不同的融合后的效果。 混合模式采取铺设在彼此顶部的两个像素，并结合他们不同的方式进行展现，例如较深的颜色混合模式只会呈现两个像素的颜色较深。?在扩展到整个图像时，混合模式可以产生一些令人惊艳的效果。 CSS混合模式提供了一种用于规定层与层之间如何相互影响及混合的方法。原来属于图片编辑应用软件领域的一些效果实现，现在也可以可以通过CSS混合模式在web中实现！ 当然，对前端非常感兴趣的朋友还可以看看这些： 浏览器支持 按照现在情况来讲,?浏览器支持?CSSbackground-blend-mode属性还在不断的完善中。早期版本的浏览器目前还不支持，但报告说在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) 与正片