ฉันจะวางภาพหนึ่งภาพไว้ที่อีกภาพหนึ่งใน HTML ได้อย่างไร

ฉันเป็นผู้เริ่มต้นในการเขียนโปรแกรมรางพยายามที่จะแสดงภาพจำนวนมากบนหน้า ภาพบางภาพจะวางซ้อนทับกัน เพื่อให้ง่ายบอกว่าฉันต้องการสี่เหลี่ยมสีน้ำเงินโดยมีสี่เหลี่ยมสีแดงที่มุมบนขวาของสี่เหลี่ยมสีน้ำเงิน (แต่ไม่แน่นตรงมุม) ฉันพยายามหลีกเลี่ยงการรวมภาพ (ด้วย ImageMagick และที่คล้ายกัน) เนื่องจากปัญหาด้านประสิทธิภาพ

ฉันแค่ต้องการวางตำแหน่งภาพที่ซ้อนทับกันซึ่งสัมพันธ์กัน

เป็นตัวอย่างที่ยากขึ้นลองจินตนาการถึงมาตรวัดระยะทางที่อยู่ภายในภาพขนาดใหญ่ สำหรับตัวเลขหกหลักฉันจะต้องรวมกันเป็นล้านภาพที่แตกต่างกันหรือทำทุกอย่างทันทีที่ทุกอย่างที่จำเป็นคือการวางภาพหกภาพที่ด้านบนของอีกหนึ่ง

ตกลงหลังจากนั้นสักครู่นี่คือสิ่งที่ฉันได้มา:

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

ในฐานะที่เป็นทางออกที่ง่ายที่สุด นั่นคือ:

สร้าง div ที่สัมพันธ์กันที่วางในโฟลว์ของหน้า; วางภาพฐานแรกเป็นญาติเพื่อให้ div รู้ว่าควรจะใหญ่แค่ไหน วางภาพซ้อนทับเป็นสัมบูรณ์สัมพันธ์กับมุมบนซ้ายของภาพแรก เคล็ดลับคือการทำให้ญาติสนิทและถูกต้อง

นี่คือกระดูกเปล่าดูสิ่งที่ฉันทำเพื่อลอยภาพหนึ่งไปอีกภาพหนึ่ง

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

แหล่ง

นี่คือโค้ดที่อาจทำให้คุณมีความคิด:

<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

ฉันสงสัยว่าโซลูชันของ Espoอาจไม่สะดวกเพราะคุณต้องวางตำแหน่งทั้งสองภาพอย่างแน่นอน คุณอาจต้องการให้คนแรกวางตำแหน่งตัวเองในการไหล

โดยปกติจะมีวิธีที่เป็นธรรมชาติคือ CSS คุณวางตำแหน่ง: สัมพันธ์กับองค์ประกอบภาชนะแล้ววางตำแหน่งลูกไว้ข้างใน น่าเสียดายที่คุณไม่สามารถใส่ภาพหนึ่งภาพไว้ในอีกภาพได้ นั่นเป็นเหตุผลที่ฉันต้องการ div คอนเทนเนอร์ ขอให้สังเกตว่าฉันทำให้มันลอยเพื่อให้ autofit กับเนื้อหา การทำให้มันแสดงผล: บล็อกแบบอินไลน์ควรทำงานได้ตามทฤษฎี แต่การสนับสนุนเบราว์เซอร์ไม่ดีพอ

แก้ไข: ฉันลบคุณลักษณะขนาดจากภาพเพื่อแสดงจุดของฉันดีขึ้น หากคุณต้องการให้อิมเมจคอนเทนเนอร์มีขนาดเริ่มต้นและคุณไม่ทราบขนาดมาก่อนคุณไม่สามารถใช้เล่ห์เหลี่ยมพื้นหลังได้ ถ้าคุณทำมันเป็นวิธีที่ดีกว่าที่จะไป

ปัญหาหนึ่งที่ฉันสังเกตเห็นว่าอาจทำให้เกิดข้อผิดพลาดคือในคำตอบของผู้ริชเตอร์รหัสด้านล่าง:

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

ควรรวมหน่วย px ภายในสไตล์เช่น

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

นอกจากนั้นคำตอบก็ใช้ได้ดี ขอบคุณ

คุณสามารถวางตำแหน่งอย่างpseudo elementsสัมพันธ์กับองค์ประกอบหลักของพวกเขา

สิ่งนี้จะช่วยให้คุณเพิ่มเลเยอร์พิเศษสองเลเยอร์สำหรับทุกองค์ประกอบดังนั้นการวางตำแหน่งรูปภาพหนึ่งไว้บนอีกอันกลายเป็นเรื่องง่าย - ด้วยมาร์กอัปที่น้อยที่สุดและความหมาย (ไม่มี divs ว่าง ฯลฯ )

มาร์กอัป:

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

นี่คือตัวอย่างสด

วิธีที่ง่ายที่สุดคือใช้ภาพพื้นหลังจากนั้นใส่ <img> ในองค์ประกอบนั้น

วิธีอื่นในการทำคือการใช้เลเยอร์ css ตันมีทรัพยากรพร้อมที่จะช่วยให้คุณมีนี้เพียงค้นหาเป็นชั้น CSS

สไตล์อินไลน์สำหรับความชัดเจนที่นี่เท่านั้น ใช้สไตล์ชีท CSS จริง

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

อาจจะช้าไปหน่อย แต่สำหรับสิ่งนี้คุณสามารถทำได้:

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: อย่าเป็นคนเชื่องช้า แต่รหัสของคุณไม่ถูกต้อง HTML widthและheightคุณลักษณะไม่อนุญาตสำหรับหน่วย คุณน่าจะนึกถึง CSS width:และheight:คุณสมบัติ คุณควรระบุประเภทเนื้อหา ( text/css; ดูรหัสของ Espo) พร้อมกับ<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>

การปล่อยpx;ในwidthและheightแอตทริบิวต์อาจทำให้เอ็นจินการเรนเดอร์หยุดชะงัก

สร้าง div ที่สัมพันธ์กันที่วางในโฟลว์ของหน้า; วางภาพฐานแรกเป็นญาติเพื่อให้ div รู้ว่าควรจะใหญ่แค่ไหน วางภาพซ้อนทับเป็นสัมบูรณ์สัมพันธ์กับมุมบนซ้ายของภาพแรก เคล็ดลับคือการทำให้ญาติสนิทและถูกต้องสมบูรณ์