HTML에서 한 이미지를 다른 이미지 위에 어떻게 배치합니까?

HTML에서 한 이미지를 다른 이미지 위에 어떻게 배치합니까?

저는 한 페이지에 많은 이미지를 보여주려고 시도하는 레일 프로그래밍의 초보자입니다.일부 이미지는 다른 이미지 위에 올려집니다.쉽게 설명하기 위해 파란색 사각형을 원하며, 파란색 사각형의 오른쪽 상단 모서리에 빨간색 사각형이 있습니다(단, 모서리가 조이지는 않습니다).성능 문제로 인해 (ImageMagick 등을 사용한) 합성을 피하려고 합니다.

중복되는 이미지를 서로 상대적으로 배치하고 싶습니다.

더 어려운 예로, 더 큰 이미지 안에 주행 기록계가 있다고 상상해 보십시오.6자리수의 경우, 백만 개의 다른 이미지를 합성하거나, 또는 모든 것을 즉시 수행해야 합니다. 필요한 것은 6개의 이미지를 다른 하나의 이미지 위에 놓는 것입니다.

잠시 후, 제가 착륙한 것은 다음과 같습니다.

.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://via.placeholder.com/50" />
  <img class="image2" src="https://via.placeholder.com/100" />
</div>

가장 간단한 해결책으로.즉, 다음과 같습니다.

페이지의 흐름에 배치되는 상대 div를 만듭니다. div가 크기를 알 수 있도록 기본 영상을 먼저 상대 영상으로 배치하고 오버레이를 첫 번째 영상의 왼쪽 위에 상대 절대 영상으로 배치합니다.비결은 친척과 절대적인 것을 정확하게 하는 것입니다.

이것은 제가 한 이미지를 다른 이미지 위에 띄우기 위해 무엇을 했는지를 보여주는 것입니다.

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

<img class="imgA1" src="https://via.placeholder.com/200/333333">
<img class="imgB1" src="https://via.placeholder.com/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>

제이에스아이들

Espo의 솔루션은 두 이미지 모두 절대적으로 위치를 지정해야 하기 때문에 불편할 수도 있다고 생각합니다.첫 번째 항목이 흐름에 배치되기를 원할 수 있습니다.

보통 CSS라는 자연스러운 방법이 있습니다.용기 요소에 상대적인 위치를 지정한 다음 그 안에 어린이를 배치합니다.안타깝게도 한 이미지를 다른 이미지 안에 넣을 수 없습니다.그게 제가 컨테이너 디브가 필요했던 이유입니다.내용물에 맞게 자동으로 맞추기 위해 플로트를 만들었습니다.표시: 인라인 블록도 이론적으로 작동해야 하지만 브라우저 지원이 부족합니다.

편집: 내 요점을 더 잘 설명하기 위해 이미지에서 크기 속성을 삭제했습니다.컨테이너 이미지를 기본 크기로 설정하고 크기를 미리 모르는 경우에는 백그라운드 트릭을 사용할 수 없습니다.만약 그렇다면, 그것은 가는 더 좋은 방법입니다.

오류를 일으킬 수 있는 한 가지 문제는 Richter의 답변, 아래 코드입니다.

<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그들의 모체 요소에 상대적입니다.

이렇게 하면 모든 요소에 대해 두 개의 레이어를 추가로 사용할 수 있습니다. 따라서 한 이미지를 다른 이미지 위에 배치하는 것이 쉬워집니다. 최소한의 의미 마크업(빈 디브 등 없음)을 사용할 수 있습니다.

마크업:

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

라이브 데모입니다.

조금 늦었을 수도 있지만 이를 위해 다음을 수행할 수 있습니다.

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

여기서는 명확한 설명을 위해 인라인 스타일만 사용합니다.실제 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>

쉽게 할 수 있는 방법은 배경 이미지를 사용한 다음 해당 요소에 <img>를 넣는 것입니다.

다른 방법은 CSS 레이어를 사용하는 것입니다.이 문제를 해결하는 데 도움이 될 수 있는 수많은 리소스가 있습니다. CSS 계층을 검색하십시오.

당신은 CSS-Grid를 사용할 수 있는데, 이것은 당신이 콘텐츠를 겹쳐서 쌓기를 원할 때 매우 편리한 솔루션입니다.먼저 그리드를 정의해야 합니다.그리드 안에서 img 태그를 통해 그리드 내의 위치를 "알려줍니다."그리드의 동일한 시작점에 배치하도록 정의하면 중복됩니다.다음 예제에서는 두 개의 영상이 겹쳐 있고 하나는 그 아래에 있습니다.

<div style="display: grid; grid-template-columns: [first-col] 100%; grid-template-rows: [first-row] 300px">
  <img src="https://fakeimg.pl/300/" style="grid-column-start: first-col; grid-row-start: first-row">
  <img src="https://fakeimg.pl/300/" style="grid-column-start: first-col; grid-row-start: first-row">
  <img src="https://fakeimg.pl/300/">
</div>

여기에서 CSS-Grid에 대한 매우 좋은 설명을 찾을 수 있습니다.

배경 크기 커버를 설정합니다.그런 다음 부모 div에 최대 너비로 설정된 다른 div로 당신의 div를 감싼다.

<div style="max-width:100px">
  <div style="background-image:url('/image.png'); background-size: cover; height:100px; width:100px; "></div>
</div>

여기 저에게 효과가 있었던 해결책이 있습니다.쌓을 모든 영상이 div 컨테이너 안에 있다고 가정하면 div의 표시 속성을 flex로 설정하기만 하면 됩니다.첫 번째 이미지에 대한 위치를 설정하지 않고 다른 모든 이미지에 대해 위치 속성을 절대로 설정합니다.마지막으로 z-index를 사용하여 도면층을 제어합니다.첫 번째 이미지의 z-index를 1로, 두 번째 이미지의 z-index를 2로 설정할 수 있습니다(나의 경우 첫 번째 이미지를 제외한 다른 모든 이미지의 z-index를 2로 설정합니다).영상의 중심을 맞추려면 div의 peasy-content 속성을 가운데로 설정하여 영상을 중앙에 수평으로 정렬하고 상단 속성을 조정하여 영상을 중앙에 수직으로 정렬할 수 있습니다.콘텐츠 정당성 및 상위 속성에 사용하는 값은 이미지의 크기와 크기가 서로 다른 장치에서 반응하는지 여부에 따라 달라집니다.다음은 제 예입니다.

img {
  border: 2px solid red;
}

.img1n2 {
  display: flex; 
  justify-content:center;
}

.img1 {
  z-index: 1;
}

.img2 {
  position: absolute; 
  z-index: 2;
  top: 52.5%;
}

<div class="img1n2">
  <img class="img1" src="https://fakeimg.pl/400/">
  <img class="img2" src="https://fakeimg.pl/300/" width="100">
  <img class="img2" src="https://fakeimg.pl/200/" width="50">
  <img class="img2" src="https://fakeimg.pl/50/" width="30">
</div>

이 방법으로 수천 개 또는 백만 개의 이미지를 쌓을 수 있습니다.당신은 당신의 특정한 필요에 맞게 CSS를 가지고 놀 수 있습니다.해피 코딩!

@부티옥사:현학적으로 말해서는 안 되지만, 당신의 코드는 유효하지 않습니다.HTMLwidth그리고.height속성은 단위를 허용하지 않습니다. CSS를 생각할 가능성이 높습니다.width:그리고.height:특성.컨텐츠 유형(text/cssEspo의 코드 참조)와 함께<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가 크기를 알 수 있도록 기본 영상을 먼저 상대 영상으로 배치하고 오버레이를 첫 번째 영상의 왼쪽 위에 상대 절대 영상으로 배치합니다.비결은 친척과 절대적인 것을 정확하게 하는 것입니다.

언급URL : https://stackoverflow.com/questions/48474/how-do-i-position-one-image-on-top-of-another-in-html