Photoshopのブレンドエフェクト（乗算、オーバーレイなど）を模倣する

Question

私はフルページの背景画像でウェブサイトを作っています。私はサイドカラムの背景イメージを作成して、Photoshopレイヤーのように動作し、ブレンドモードを掛けたいと思っています。これはPhotoshopの乗算レイヤーの「振る舞い」を持つ青色のサーフェスです。

ウェブサイトを別の画面比率/サイズで開いたときに背景が変更される可能性があるため、オーバーレイと画像を結合することはできません。

はSOにソリューションがたくさんありますが、彼らは唯一の固定位置ではなく、可変位置/背景色の面で2枚の画像を掛けると連携します。

これを達成するためのトリックはありますか？

Answer 1

FCは、CSS3のカスタムフィルタやSVG/Canvasを使用できると述べています。

しかし、レイヤーをブレンドするためにクロスブラウザソリューションが必要な場合は、JSメソッドを使用する必要があります。例えばPixasticから、JSの画像処理スクリプト：http://www.pixastic.com/lib/docs/actions/blend/

加えて、それはぼかしのような他の視覚効果をたくさん持っている、ノイズ、作物、モザイクなど

私はそれが動作しますが、いくつかのプロジェクトのために前にこのスクリプトを使用本当に素晴らしい:)

それはあなたのお役に立てば幸いです）

SVGのビットを使用した単純な

Answer 2

：

<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- *クラスを割り当てます。

あなたは** CSS ** `RGBAを（使用していないのはなぜ

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