Cách che phủ hình ảnh trong javascript?

Question

Tôi cần giải quyết vấn đề sau.

Tôi có hai (hoặc nhiều hơn) hình ảnh .PNG có cùng kích thước. Mỗi ảnh PNG được tạo với màu nền trong suốt.

Tôi cần hiển thị img1 và khi nó img2, vì vậy ở những nơi có màu sắc trgparent, img1 sẽ được nhìn thấy.

Ví dụ: img1 phần trên chứa đầy màu trong suốt và bò trên phần dưới. img2 phần trên chứa các đám mây và downpart đầy màu sắc trong suốt.

Tôi muốn kết hợp hai hình ảnh này và thấy những đám mây phía trên bò.

Tôi hiểu rằng tôi cần phải sử dụng một số bộ lọc khi hiển thị cả hai hình ảnh, nhưng không chắc chắn một bộ lọc nào và thông số nào để sử dụng.

Answer 1

Bạn không cần sử dụng bất kỳ loại bộ lọc nào (except in IE6).

Bạn chỉ cần đặt các phần tử <img> lên trên nhau, sử dụng CSS position: absolute để làm cho cả hai phần tử này chiếm cùng một khu vực.

In IE6, you'll need an AlphaImageLoader filter simply to display the PNGs with transparency

Answer 2

Bạn có thể thử thiết lập của họ .style.position để "tuyệt đối", cung cấp cho họ các tọa độ tương tự với bên trái và đỉnh (hoặc bên phải hoặc phía dưới), và sau đó thay đổi z-index của họ. Mặc dù nó khá bẩn, và có lẽ nó không hoạt động tốt với trang của bạn, nhưng tôi không thể nghĩ ra một giải pháp khác.

Answer 3

Something như thế này nên làm việc (chỉ sử dụng HTML/CSS):

HTML:

<div class="imageWrapper"> 
    <img class="overlayImage" src="cow.png"> 
    <img class="overlayImage" src="clouds.png"> 
    <img class="overlayImage" src="downpart.png"> 
</div> 

CSS:

.imageWrapper { 
    position: relative; 
} 
.overlayImage { 
    position: absolute; 
    top: 0; 
    left: 0; 
} 

Hãy ghi nhớ rằng IE6 không xử lý độ trong suốt trong PNG rất tốt. Nếu bạn cần nó để làm việc trong IE6, bạn sẽ cần phải áp dụng các bộ lọc mà bạn đã đề cập. Thủ tục này là detailed here.

Answer 4

Nếu bạn đang sử dụng jquery thử điều này trong bất kỳ trình duyệt

<script> 
$(function() { 
    var position = $("#i1").offset(); 
    $('#i2').css({ position:'absolute', top:position.top, left: position.left}); 
}); 
</script> 
<img id='i1' src='images/zap_ring.png' /> 
<img id='i2' src='images/zap_ring_hover.png' /> 

và điều chỉnh top & left giá trị

$('#i2').css({ position:'absolute', top:position.top-10, left: position.left+5});