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

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 là để nằm trên đầu của những người khác. Để làm cho nó đơn giản, giả sử tôi muốn một hình vuông màu xanh, với 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 ở góc). Tôi đang cố gắng tránh 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 chồng chéo lên nhau.

Như một ví dụ khó khăn hơn, hãy tưởng tượng một máy đo đường đượ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 tổng hợp một triệu hình ảnh khác nhau hoặc thực hiện tất cả mọi thứ một cách nhanh chóng, trong đó tất cả những gì cần thiết là đặt sáu hình ảnh lên trên một hình ảnh khác.

Ok, sau một thời gian, đây là những gì tôi đã đáp xuống:

.parent {
  position: relative;
  top: 0;
  left: 0;
}
.image1 {
  position: relative;
  top: 0;
  left: 0;
  border: 1px red solid;
}
.image2 {
  position: absolute;
  top: 30px;
  left: 30px;
  border: 1px green solid;
}

<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 một div tương đối được đặt trong dòng chảy của trang; đặt hình ảnh cơ sở đầu tiên là tương đối để div biết nó nên lớn như thế nào; đặt các lớp phủ là tuyệt đối so với phía trên bên trái của hình ảnh đầu tiên. Bí quyết là lấy người thân và tuyệt đối sửa.

Đây là một barebones nhìn vào những gì tôi đã làm để nổi một hình ảnh trên một hình ả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">

Nguồn

Đây là mã có thể cung cấp cho bạn ý 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>

Câu đố

Tôi nghi ngờ rằng giải pháp của Espo có thể bất tiện vì nó yêu cầu bạn phải định vị cả hai hình ảnh một cách tuyệt đối. Bạn có thể muốn cái đầu tiên định vị chính nó trong dòng chảy.

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 vào phần tử container, và sau đó hoàn toàn định vị trẻ em bên trong nó. Thật không may, bạn không thể đặt một hình ảnh 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àm cho nó tự động đến nội dung của nó. Làm cho nó hiển thị: khối nội tuyến về mặt lý thuyết cũng hoạt động tốt, nhưng hỗ trợ trình duyệt thì kém.

EDIT: Tôi đã xóa các thuộc tính kích thước khỏi hình ảnh để minh họa quan điểm của tôi tốt hơn. Nếu bạn muốn hình ảnh container 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 thủ thuật nền . Nếu bạn làm, đó là một cách tốt hơn để đi.

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

<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.

Bạn hoàn toàn có thể định vị pseudo elementsliên quan đến yếu tố cha mẹ của họ.

Điều này cung cấp 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 một hình ảnh khác 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, v.v.).

đá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;
}

Đây là một DEMO SỐNG

Cách dễ dàng để làm điều đó là sử dụng ả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ó rất nhiều tài nguyên có sẵn để giúp bạn với điều này, chỉ cần tìm kiếm các lớp css .

Kiểu nội tuyến chỉ cho rõ ràng ở đâ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>

Nó có thể hơi muộn nhưng đối với điều này bạn có thể làm:

HTML

<!-- html -->
<div class="images-wrapper">
  <img src="images/1" alt="image 1" />
  <img src="images/2" alt="image 2" />
  <img src="images/3" alt="image 3" />
  <img src="images/4" alt="image 4" />
</div>

SASS

// In _extra.scss
$maxImagesNumber: 5;

.images-wrapper {
  img {
    position: absolute;
    padding: 5px;
    border: solid black 1px;
  }

  @for $i from $maxImagesNumber through 1 {
    :nth-child(#{ $i }) {
      z-index: #{ $maxImagesNumber - ($i - 1) };
      left: #{ ($i - 1) * 30 }px;
    }
  }
}

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

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

Để lại px;trong widthvà heightcác thuộc tính có thể khiến một công cụ kết xuất chùn bước.

Tạo một div tương đối được đặt trong dòng chảy của trang; đặt hình ảnh cơ sở đầu tiên là tương đối để div biết nó nên lớn như thế nào; đặt các lớp phủ là tuyệt đối so với phía trên bên trái của hình ảnh đầu tiên. Bí quyết là lấy người thân và tuyệt đối sửa.