Bắt chước hiệu ứng pha trộn Photoshop như nhân, lớp phủ, vv

Question

Tôi đang tạo một trang web có hình nền trang đầy đủ. Tôi muốn tạo một hình nền cho một cột bên, hoạt động giống như một lớp Photoshop với nhân với chế độ hòa trộn. Nó chỉ là một bề mặt màu xanh với 'hành vi' của một lớp nhân Photoshop.

Không thể hợp nhất lớp phủ và hình ảnh vì nền có thể thay đổi khi trang web được mở ở tỷ lệ/kích thước màn hình khác.

Có rất nhiều các giải pháp trên SO, nhưng họ chỉ làm việc với nhân 2 hình ảnh với một vị trí cố định, không phải là một bề mặt màu với biến vị trí/nền.

Có các thủ thuật để đạt được điều này không?

Answer 1

Vì FC cho biết bạn có thể sử dụng bộ lọc tùy chỉnh CSS3 hoặc SVG/Canvas.

Nhưng nếu bạn cần giải pháp trình duyệt chéo để pha trộn các lớp, bạn phải sử dụng phương pháp JS. Ví dụ, JS kịch bản xử lý hình ảnh từ Pixastic: http://www.pixastic.com/lib/docs/actions/blend/

Ngoài ra nó có rất nhiều hiệu ứng hình ảnh khác như mờ, tiếng ồn, cắt, khảm, vv

tôi đã sử dụng kịch bản này trước khi cho một số dự án, nó hoạt động thực sự tuyệt vời :)

Hy vọng nó sẽ giúp bạn)

Answer 2

đơn giản với một chút 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> 

và một số CSS:

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

Các fiddle: http://jsfiddle.net/7uCQQ/

Answer 3

tôi là một nhà thiết kế và có cùng một vấn đề, tìm kiếm giải pháp trước khi đưa psd hơn cho nhóm dev - bạn có thể thử this js và/hoặc http://css-tricks.com/basics-css-blend-modes/

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

Hy vọng nó hoạt động cho bạn hoặc người khác ở đây. :)

Answer 4

jsBin demo

Sử dụng thuộc tính CSS3 mix-blend-mode^{MDN Docs}
(Đối với dự phòng sử dụng một màu rgba hoặc hsla với một chút minh bạch alpha.)

Gán một mong muốn lớp blend- * đến yếu tố của bạn như:

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