Làm cách nào để định vị một hình ảnh trên một hình ảnh khác trong HTML?

Question

Tôi là người mới bắt đầu lập trình đường ray, cố gắng hiển thị nhiều hình ảnh trên một trang. Một số hình ảnh nằm trên đầu trang của những người khác. Để làm cho nó đơn giản, nói rằng tôi muốn một hình vuông màu xanh, với một hình vuông màu đỏ ở góc trên bên phải của hình vuông màu xanh (nhưng không chặt chẽ trong góc). Tôi đang cố gắng tránh sự kết hợp (với ImageMagick và tương tự) do các vấn đề về hiệu suất.

Tôi chỉ muốn định vị các hình ảnh trùng lặp liên quan đến nhau.

Như một ví dụ khó khăn hơn, hãy tưởng tượng một đồng hồ đo được đặt bên trong một hình ảnh lớn hơn. Đối với sáu chữ số, tôi sẽ cần phải tổng hợp một triệu hình ảnh khác nhau, hoặc làm tất cả trên bay, nơi tất cả những gì cần thiết là để đặt sáu hình ảnh trên đầu trang của một trong những khác.

Answer 1

Ok, sau một thời gian, đây là những gì tôi đã đổ bộ lên:

.parent { 
 
    position: relative; 
 
    top: 0; 
 
    left: 0; 
 
} 
 
.image1 { 
 
    position: relative; 
 
    top: 0; 
 
    left: 0; 
 
} 
 
.image2 { 
 
    position: absolute; 
 
    top: 30px; 
 
    left: 70px; 
 
}

<div class="parent"> 
 
    <img class="image1" src="https://placehold.it/50" /> 
 
    <img class="image2" src="https://placehold.it/100" /> 
 
</div>

Là giải pháp đơn giản nhất. Đó là:

Tạo div tương đối được đặt trong luồng của trang; đặt hình ảnh cơ sở đầu tiên là tương đối sao cho div biết lớn như thế nào; đặt các lớp phủ như tuyệt đối liên quan đến phía trên bên trái của hình ảnh đầu tiên. Bí quyết là để có được những người thân và tuyệt đối chính xác.

Answer 2

Cách dễ dàng để thực hiện việc này là sử dụng hình nền sau đó chỉ cần đặt <img> trong phần tử đó.

Cách khác để làm là sử dụng các lớp css. Có một tấn tài nguyên có sẵn để trợ giúp bạn với điều này, chỉ cần tìm kiếm css layers.

Answer 3

Đây là tính năng xem xét những gì tôi đã thực hiện để nổi hình ảnh lên hình khác.

img { 
 
    position: absolute; 
 
    top: 25px; 
 
    left: 25px; 
 
} 
 
.imgA1 { 
 
    z-index: 1; 
 
} 
 
.imgB1 { 
 
    z-index: 3; 
 
}

<img class="imgA1" src="https://placehold.it/200/333333"> 
 
<img class="imgB1" src="https://placehold.it/100">

Source

Answer 4

Dưới đây là mã có thể cung cấp cho bạn những ý tưởng:

<style> 
.containerdiv { float: left; position: relative; } 
.cornerimage { position: absolute; top: 0; right: 0; } 
</style> 

<div class="containerdiv"> 
    <img border="0" src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" alt="""> 
    <img class="cornerimage" border="0" src="http://www.gravatar.com/avatar/" alt=""> 
<div> 

JSFiddle

Tôi nghi ngờ rằng Espo's solution có thể bằn nvenient bởi vì nó đòi hỏi bạn phải đặt cả hai hình ảnh hoàn toàn. Bạn có thể muốn vị trí đầu tiên tự định vị trong luồng.

Thông thường, có một cách tự nhiên để làm điều đó là CSS. Bạn đặt vị trí: tương đối trên phần tử vùng chứa, và sau đó đặt hoàn toàn vị trí con bên trong nó. Thật không may, bạn không thể đặt một hình ảnh bên trong một hình ảnh khác. Đó là lý do tại sao tôi cần div container. Lưu ý rằng tôi đã làm cho nó nổi lên để làm cho nó tự động hóa nội dung của nó. Làm cho nó hiển thị: inline-block nên về mặt lý thuyết làm việc là tốt, nhưng hỗ trợ trình duyệt là người nghèo ở đó.

EDIT: Tôi đã xóa thuộc tính kích thước khỏi hình ảnh để minh họa cho điểm của tôi tốt hơn. Nếu bạn muốn hình ảnh vùng chứa có kích thước mặc định và bạn không biết kích thước trước đó, bạn không thể sử dụng background trick. Nếu bạn làm, đó là một cách tốt hơn để đi.

Answer 5

Kiểu nội tuyến chỉ để làm rõ ở đây. Sử dụng biểu định kiểu CSS thực.

<!-- First, your background image is a DIV with a background 
    image style applied, not a IMG tag. --> 
<div style="background-image:url(YourBackgroundImage);"> 
    <!-- Second, create a placeholder div to assist in positioning 
     the other images. This is relative to the background div. --> 
    <div style="position: relative; left: 0; top: 0;"> 
     <!-- Now you can place your IMG tags, and position them relative 
      to the container we just made --> 
     <img src="YourForegroundImage" style="position: relative; top: 0; left: 0;"/> 
    </div> 
</div> 

Answer 6

@ buti-oxa: Không đáng kể, nhưng mã của bạn không hợp lệ. Thuộc tính HTML width và height không cho phép đơn vị; bạn có thể nghĩ đến các thuộc tính CSS width: và height:. Bạn cũng nên cung cấp loại nội dung (text/css; xem mã của Espo) với thẻ <style>.

<style type="text/css"> 
.containerdiv { float: left; position: relative; } 
.cornerimage { position: absolute; top: 0; right: 0; } 
</style> 

<div class="containerdiv"> 
    <img border="0" src="http://www.gravatar.com/avatar/" alt="" width="100" height="100"> 
    <img class="cornerimage" border="0" src="http://www.gravatar.com/avatar/" alt="" width="40" height="40"> 
<div> 

Rời px; trong width và height thuộc tính có thể gây ra một rendering engine để lẩn tránh.

Answer 7

Một vấn đề tôi nhận thấy rằng có thể gây ra lỗi là trong câu trả lời của rrichter, mã bên dưới:

<img src="b.jpg" style="position: absolute; top: 30; left: 70;"/> 

nên bao gồm các đơn vị px trong phong cách ví dụ.

<img src="b.jpg" style="position: absolute; top: 30px; left: 70px;"/> 

Ngoài ra, câu trả lời đã hoạt động tốt. Cảm ơn.

Answer 8

Bạn hoàn toàn có thể định vị pseudo elements liên quan đến yếu tố gốc của chúng.

Điều này mang lại cho bạn hai lớp bổ sung để chơi với mọi phần tử - vì vậy việc định vị một hình ảnh trên đầu trang khác sẽ trở nên dễ dàng - với đánh dấu tối thiểu và ngữ nghĩa (không có div trống ...).

đánh dấu:

<div class="overlap"></div> 

css:

.overlap 
{ 
    width: 100px; 
    height: 100px; 
    position: relative; 
    background-color: blue; 
} 
.overlap:after 
{ 
    content: ''; 
    position: absolute; 
    width: 20px; 
    height: 20px; 
    top: 5px; 
    left: 5px; 
    background-color: red; 
} 

Dưới đây là một LIVE DEMO