模仿Photoshop混合效果，如乘法，覆蓋等

Question

我正在製作一個網站，整頁背景圖片。我想創建一個側欄的背景圖像，作爲混合模式乘法運行，就像Photoshop圖層一樣。它只是一個藍色的彩色表面，具有Photoshop乘法層的「行爲」。

無法合併疊加層和圖像，因爲當網站以另一個屏幕比例/大小打開時，背景可能會更改。

上有SO很多解決方案，但它們只以2張圖片包含有一個固定的位置，而不是一個彩色表面具有可變位置/背景乘以工作。

是否有技巧來實現這一目標？

Answer 1

正如FC所說，您可以使用CSS3自定義過濾器或SVG/Canvas。

但是，如果您需要跨瀏覽器解決方案來混合圖層，則必須使用JS方法。例如，從Pixastic JS圖像處理腳本：http://www.pixastic.com/lib/docs/actions/blend/

另外它有很多的像模糊，噪點，裁剪，拼接等

我之前使用這個腳本幾個項目的其他視覺效果，它的工作原理真的很大:)

希望它可以幫助你）

Answer 2

簡單的帶着幾分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/

Answer 3

我是個設計師，並有同樣的問題，把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> 

希望它適合你或他人在這裏。 :)

Answer 4

jsBin demo

使用CSS3屬性mix-blend-mode^{MDN Docs}
（對於後備使用rgba或hsla顏色與位阿爾法透明的。）

指定所需blend- *類的元素，如：

/* ::: 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;}

<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>