Imitare gli effetti di fusione di Photoshop come moltiplicare, sovrapporre ecc.

Question

Realizzo un sito Web con un'immagine di sfondo della pagina intera. Voglio creare un'immagine di sfondo per una colonna laterale che si comporta come un livello Photoshop con moltiplica come modalità di fusione. È solo una superficie colorata blu con il "comportamento" di un livello di moltiplicazione di Photoshop.

Non è possibile unire l'overlay e l'immagine poiché lo sfondo può cambiare quando il sito Web viene aperto in un altro rapporto schermo/dimensione.

Ci sono un sacco di soluzioni su SO, ma funzionano solo con moltiplicando 2 immagini con una posizione fissa, non è una superficie colorata con la posizione/sfondo variabile.

Ci sono trucchi per raggiungere questo obiettivo?

Answer 1

Come FC ha detto che è possibile utilizzare i filtri personalizzati CSS3 o SVG/Canvas.

Ma se è necessaria una soluzione cross-browser per miscelare i livelli, è necessario utilizzare il metodo JS. Ad esempio, JS script di elaborazione delle immagini da Pixastic: http://www.pixastic.com/lib/docs/actions/blend/

In più ha un sacco di altri effetti visivi come sfocatura, rumore, delle colture, mosaico ecc

Ho usato questo script prima per diversi progetti, funziona davvero grande :)

Spero che ti aiuta)

Answer 2

semplice con un po 'di 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> 

e alcuni CSS:

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

il violino: http://jsfiddle.net/7uCQQ/

Answer 3

Sono un designer e aveva lo stesso problema, alla ricerca di soluzioni prima di mettere il PSD verso il team di sviluppo - si può provare this js e/o http://css-tricks.com/basics-css-blend-modes/

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

Spero che funziona per voi o altri qui. :)

Answer 4

jsBin demo

Utilizzare la proprietà CSS3 mix-blend-mode^{MDN Docs}
(Per fallback utilizzare un colore o di rgbahsla con un po 'di trasparenza alfa.)

Assegnare un desiderato classe Blend * al vostro elemento come:

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