模仿Photoshop混合效果,如乘法,叠加等

时间:2013-07-27 14:47:30

标签: css overlay photoshop blend

我正在制作一个带有整页背景图片的网站。我想为侧栏创建一个背景图像,其作用类似于Photoshop图层,具有乘法混合模式。它只是一个蓝色的表面,具有Photoshop多层的“行为”。

无法合并叠加层和图像,因为当以另一个屏幕比例/大小打开网站时,背景会发生变化。

enter image description here

SO上有很多解决方案,但它们只能将2个图像与固定位置相乘,而不是具有可变位置/背景的彩色表面。

有没有诀窍来实现这个目标?

4 个答案:

答案 0 :(得分:4)

<强> jsBin demo

使用CSS3属性 mix-blend-mode MDN Docs
(对于后备使用rgbahsla颜色,并带有一点alpha透明度。)

为您的元素指定所需的混合 - * 类,如:

&#13;
&#13;
/* ::: BLEND MODE CLASSES */

.blend-normal{ mix-blend-mode: normal; }
.blend-multiply{ mix-blend-mode: multiply; }
.blend-screen{ mix-blend-mode: screen; }
.blend-overlay{ mix-blend-mode: overlay; }
.blend-darken{ mix-blend-mode: darken; }
.blend-lighten{ mix-blend-mode: lighten; }
.blend-colordodge{ mix-blend-mode: color-dodge; }
.blend-colorburn{ mix-blend-mode: color-burn; }
.blend-hardlight{ mix-blend-mode: hard-light; }
.blend-softlight{ mix-blend-mode: soft-light; }
.blend-difference{ mix-blend-mode: difference; }
.blend-exclusion{ mix-blend-mode: exclusion; }
.blend-hue{ mix-blend-mode: hue; }
.blend-saturation{ mix-blend-mode: saturation; }
.blend-color{ mix-blend-mode: color; }
.blend-luminosity{ mix-blend-mode: luminosity; }


/* ::: SET HERE YOUR INITIAL COLORS */
div{  
  background: rgba(0, 80, 200, 0.8);
  color:      #fff;
}
div span{
  color:#000;
}


/* ::: FOR DEMO ONLY */
html, body{margin:0; height:100%;font:100%/1 sans-serif;}
body{background: url(http://i.stack.imgur.com/cBy6q.jpg)fixed 50%/cover;}
div{font-size:2.2em; padding:20px; margin:15px;}
div:first-of-type{margin-top:150px;}
div:last-of-type{margin-bottom:150px;}
&#13;
<div class="">(rgba) <span>(rgba)</span></div>
<div class="blend-normal">normal <span>normal</span></div>
<div class="blend-multiply">multiply <span>multiply</span></div>
<div class="blend-screen">screen <span>screen</span></div>
<div class="blend-overlay">overlay <span>overlay</span></div>
<div class="blend-darken">darken <span>darken</span></div>
<div class="blend-lighten">lighten <span>lighten</span></div>
<div class="blend-colordodge">color-dodge <span>color-dodge</span></div>
<div class="blend-colorburn">color-burn <span>color-burn</span></div>
<div class="blend-hardlight">hard-light <span>hard-light</span></div>
<div class="blend-softlight">soft-light <span>soft-light</span></div>
<div class="blend-difference">difference <span>difference</span></div>
<div class="blend-exclusion">exclusion <span>exclusion</span></div>
<div class="blend-hue">hue <span>hue</span></div>
<div class="blend-saturation">saturation <span>saturation</span></div>
<div class="blend-color">color <span>color</span></div>
<div class="blend-luminosity">luminosity <span>luminosity</span></div>
&#13;
&#13;
&#13;

CSS blend mode like Photoshop multiply overlay burn dodge

答案 1 :(得分:3)

简单的一点SVG:

<svg width="200" height="200" viewBox="10 10 280 280">
    <filter id="multiply">
        <feBlend mode="multiply"/>
    </filter>
    <image id="kitten" x="0" y="0" width="300" height="300" xlink:href="http://placekitten.com/300" />
</svg>

和一些CSS:

#kitten:hover {
    filter:url(#multiply);
}

小提琴:http://jsfiddle.net/7uCQQ/

答案 2 :(得分:1)

FC说你可以使用CSS3自定义过滤器或SVG / Canvas。

但是如果你需要一个用于混合图层的跨浏览器解决方案,你必须使用JS方法。例如,来自Pixastic的JS图像处理脚本:http://www.pixastic.com/lib/docs/actions/blend/

此外,它还有很多其他视觉效果,如模糊,噪点,裁剪,马赛克等。

我以前在几个项目中使用过这个脚本,它确实非常棒:)

希望它可以帮助你)

答案 3 :(得分:0)

我是一名设计师并遇到同样的问题,在将psd交给开发团队之前寻找解决方案 - 您可以尝试this js和/或http://css-tricks.com/basics-css-blend-modes/

Jsfiddle代码:

#kitten:hover {
    filter:url(#multiply);
}

<svg width="200" height="200" viewBox="10 10 280 280">
    <filter id="multiply">
        <feBlend mode="multiply"/>
    </filter>
    <image id="kitten" x="0" y="0" width="300" height="300" xlink:href="http://placekitten.com/300" />
</svg>

希望它对你或其他人有用。 :)