HTML/CSS - Đặt img trên đầu trang của img?

Question

Tôi có hai png. Một là hình ảnh thực tế, hình ảnh khác là một hình ảnh chủ yếu trong suốt với biểu tượng giá nhãn dán ở trên cùng bên phải. Tôi biết tôi có thể kết hợp chúng trong photoshop và chỉ cần tạo một hình ảnh.

Nhưng tôi cần những thứ này được tạo động, cho một loạt các hình ảnh cơ sở khác nhau.

Có cách nào để mã "hình ảnh thực tế" và sau đó sử dụng mã để che phủ "hình ảnh hình dán trong suốt" không?

Answer 1

Bạn sẽ cần đặt thuộc tính vị trí thành tương đối hoặc tuyệt đối, đặt thuộc tính bên trái và trên cùng với giá trị mong muốn, sau đó đặt thuộc tính z-index thành 1 (giả sử bạn không có chỉ mục z khác các thuộc tính đã được thiết lập). Hãy nhớ rằng nơi mà hình ảnh được cho là hiển thị mà không có các thuộc tính trên cùng và bên trái đã thay đổi, sẽ có một không gian cần thiết.

Answer 2

Chắc chắn, cách dễ nhất sẽ được hoàn toàn vị trí của cả hai hình ảnh trong container của họ:

<div style="position:relative"> 
    <img src="main-image.jpg" style="position:absolute;"/> 
    <img src="overlay-image.png" style="position:absolute;"/> 
</div> 

Các position:relative trên thùng là cần thiết cho việc định vị tuyệt đối của trẻ em để làm việc. Tất nhiên, nếu các container là chính nó hoàn toàn vị trí đã có, thì đó là tốt.

position:absolute là không cần cần thiết trên hình ảnh cơ sở nếu cả hai hình ảnh ở góc trên cùng bên trái, nhưng cho phép bạn tinh chỉnh vị trí của nó nếu cần.

Bạn cũng có thể sử dụng vị trí tĩnh trên hình ảnh chính và vị trí tương đối về hình ảnh lớp phủ:

<div style="position:relative"> 
    <img src="main-image.jpg" style="width:100px"/> 
    <img src="overlay-image.png" style="position:relative; left:-100px"/> 
</div> 

nhưng để làm việc này bạn cần phải biết chiều rộng của hình ảnh gốc.

Answer 3

Bọc hình ảnh vào <div> với hình ảnh lớp phủ trước tiên và hình ảnh thực tế thứ hai và có thể đặt css của div thành position: relative.

Hai hình ảnh sau đó có thể được cung cấp css {position: absolute; top: 0; left: 0;}.

<div style="position:relative;"> 
    <img src="overlay.png" style="position: absolute; top: 0; left: 0;"> 
    <img src="actual.png" style="position: absolute; top: 0; left: 0;"> 
</div>` 

Nếu bạn thực sự muốn an toàn, bạn có thể đặt z-index của mỗi hình ảnh.