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://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를 사용하는 자연스러운 방법이 있습니다. 컨테이너 요소에 position : relative을 넣은 다음 절대적으로 자식을 그 안에 배치하십시오. 불행히도 한 이미지를 다른 이미지 안에 넣을 수 없습니다. 컨테이너 div가 필요한 이유입니다. 내용에 자동으로 맞추기 위해 플로트로 만들었습니다. 인라인 블록은 이론적으로 잘 작동하지만 브라우저 지원은 열악합니다.

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

답변

내가 오류를 일으킬 수 있음을 발견 한 한 가지 문제는 리처 터의 답변에서 아래 코드입니다.

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

여기의 라이브 데모

답변

가장 쉬운 방법은 배경 이미지를 사용하고 해당 요소에 <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>