Naśladuj efekty mieszania programu Photoshop, takie jak mnożenie, nakładanie itp.

Question

Tworzę witrynę internetową z pełnym tłem strony. Chcę utworzyć obraz tła dla bocznej kolumny, która działa jak warstwa Photoshopa z pomnożeniem jako tryb mieszania. Jest to po prostu niebiesko zabarwiona powierzchnia z "zachowaniem" wielowarstwowej warstwy Photoshopa.

Nie można scalić nakładki i obrazu, ponieważ tło może się zmienić po otwarciu witryny w innym rozmiarze/rozmiarze ekranu.

Istnieje wiele rozwiązań na SO, ale działają one tylko pomnożenie 2 obrazy o ustalonej pozycji, a nie kolorowej powierzchni o zmiennym położeniu/tle.

Czy są jakieś sztuczki, aby to osiągnąć?

Answer 1

Jak powiedział FC, można używać niestandardowych filtrów CSS3 lub SVG/Canvas.

Ale jeśli potrzebujesz mieszania między przeglądarkami do mieszania warstw, musisz użyć metody JS. Na przykład, skrypt JS przetwarzania obrazu z Pixastic: http://www.pixastic.com/lib/docs/actions/blend/

Ponadto posiada wiele innych efektów wizualnych, takich jak rozmycie, hałas, kadrowanie, mozaika itp

użyłem tego skryptu przed kilku projektów, to działa naprawdę świetne :)

Nadzieję, że to pomaga)

Answer 2

Proste z odrobiną 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> 

i niektóre CSS:

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

skrzypcach: http://jsfiddle.net/7uCQQ/

Answer 3

jestem projektantem i miał ten sam problem, szukając rozwiązań przed uruchomieniem przez PSD do zespołu dev - można spróbować this js i/lub http://css-tricks.com/basics-css-blend-modes/

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

Nadzieję, że pracuje dla Ciebie lub innych tutaj. :)

Answer 4

jsBin demo

pomocą właściwość CSS 3 mix-blend-mode^{MDN Docs}
(zastępczej dla użyć rgba lub hsla koloru z kawałka przejrzystości alfa.)

Przypisywanie pożądany blend- * klasę do elementów takich jak:

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