Cách đặt hình ảnh lên hình khác?

Question

Cách đặt hình ảnh lên một hình ảnh lớn hơn, như trên youtube, nút phát được hiển thị ở đầu hình thu nhỏ video?

Answer 1

Nếu bạn có kiểm soát tốt kích thước hình ảnh, chúng tôi đã sử dụng nền cho các phần tử khác nhau - ví dụ: đặt nền của ô bảng thành một hình ảnh và đặt tab img bên trong ô.

Answer 2

Tôi không chắc chắn rằng YouTube sử dụng hình ảnh cho hiệu ứng này, có phải đó vẫn là trình phát Flash không?

Nhưng dù sao, chính xác việc này được thực hiện phụ thuộc rất nhiều vào thiết kế mà bạn muốn đạt được. Giả sử bạn muốn đạt được phong cách YouTube, nơi bạn có hình thu nhỏ và muốn phủ lên hình ảnh nút phát ở trên cùng. Nếu bạn muốn thu nhỏ là một <img> thẻ thực tế, bạn sẽ cần thêm một số đánh dấu, như thế này:

<div class="thumb-wrapper"> 
<img src="mythumbnail.gif" alt="my awesome video" /><span></span> 
</div> 

Các wrapper <div> là cần thiết để bạn có thể nhắm mục tiêu img và span một cách chính xác, và có kích thước để chứa chúng trong Phạm vi là nơi hình ảnh lớp phủ sẽ đi.

.thumb-wrapper { 
position:relative; 
} 

.thumbwrapper span { 
position:absolute; 
top: 0px; 
left: 0px; 
width: 100%; 
height: 100%; 
z-index: 100; 
background: transparent url(overlay.png) no-repeat; 
} 

(Tôi đã không thực sự thử nghiệm này, nếu nó blatently sai cho tôi biết tôi sẽ rà soát lại nó!)

này giả định một vài điều:

1. hình thu nhỏ của bạn sẽ luôn là kích thước cố định và hình ảnh lớp phủ của bạn khớp với số đó
2. Hình ảnh lớp phủ của bạn là một hình ảnh trong suốt PNG

Bạn cũng có thể sử dụng kiểu opacity: để đạt đượC# 2. Tất nhiên, IE6 sẽ đi sau đầu xấu xí của nó và bạn sẽ cần phải sử dụng một sửa chữa PNG cho nó nếu đi tuyến đường hình ảnh trong suốt, hoặc một bộ lọc opacity riêng biệt nếu sử dụng phương pháp đó. Cả hai đều được trả lời một cách không chắc chắn ở nơi khác trên Stack Overflow hoặc dễ dàng google-có thể.

Nếu bạn có các yêu cầu khác, bạn có thể thực hiện việc này mà không cần đánh dấu thêm, vì tôi đã nói tất cả phụ thuộc vào những gì bạn cần chính xác. Một số yêu cầu có thể không thực hiện được nếu không có JavaScript (điều này tất nhiên có nghĩa là bạn có thể thêm bất kỳ đánh dấu nào với điều đó!).

Answer 3

Lấy ví dụ bạn của youtube, bạn có thể rất dễ dàng làm điều này với 2 hình ảnh và 1 thẻ img và một chút CSS dĩ nhiên;)

<style> 
    img.youtube { 
     width:500px; height:500px; 
     margin:0; padding:0; 
     background:transparent url(/point/to/your/larger/image.jpg) no-repeat center 
    } 
</style> 

<img src="/point/to/youtube/play/image.png" alt="Gotta have alt text ;)" border="0" class="youtube" /> 

Làm thế nào nó hoạt động rất đơn giản, bạn có nhỏ hình ảnh youtube dưới dạng PNG hoặc GIF trong suốt và sau đó đặt hình nền làm hình ảnh lớn hơn, sau đó sẽ cung cấp hiệu ứng của hình ảnh nhỏ hơn ở giữa mà không cần đánh dấu thêm.

Answer 4

Bạn sẽ tìm ra giải pháp trong các chủ đề sau đây trên StackOverflow: How to draw a graphic over another graphic

Ngay (trích dẫn sau Ipsquiggle):

<div style="position:relative"> 
    <div> 
    <img url="backgroundimg.png"> 
    </div> 
    <div style="position:absolute; left:0; top:0;"> 
    <a href="foo.html"><img url="smallgraphic.png"></a> 
    </div> 
</div> 

Xem thêm chi tiết tại sao và làm thế nào nó hoạt động trong các chủ đề ban đầu.

Answer 5

Câu trả lời của mọi người ở đây quá phức tạp.

Tạo hình PNG, bán trong suốt, có biểu tượng có vẻ như là "phát". Làm cho nó kích thước bạn muốn, có thể là một đồ họa 320x240 hoặc những gì không. Hãy nói rằng bạn đặt tên nó là "overlay.png"

Hãy nói rằng YouTube tạo thumbnail là http://img.ytimg.com/abcdefg/0.jpg

Bây giờ tất cả các bạn cần trong mã của bạn là thế này:

<a href="destination_of_your_link"><img src="overlay.png" width="320" height="240" border="0" style="background:URL(http://img.ytimg.com/abcdefg/0.jpg) center center black;" /></a>

Chừng nào bạn đối tượng mục tiêu vẫn không sử dụng IE6, bạn nên an toàn.