CSS에서 이미지 겹치는 방법

주: 본고는 최초로 나의 사이트에 발표되었는데, 너는 읽을 수 있다here.
현재 웹 디자인에서 매우 유행하는 방식 중 하나는 이미지를 겹치는 것이다.디자인을 당신에게 맡길 때, 그것을 실현하는 개발자로서, 대부분의 CSS와 같이 그것을 실현할 수 있는 몇 가지 방법이 있습니다.
한 가지 방법은 당신이 z지수가 비교적 낮은 원소를 절대적으로 포지셔닝하여 다른 이미지를 맨 위에 위치시키고 모든 이미지의 폭을 조정할 수 있다는 것이다. 그러면 당신은 이 두 원소를 볼 수 있고 낮이라고 할 수 있다. 그렇지?
응, 그림 뒤의 텍스트나 다른 내용이 필요하면 문제가 생길 거야.절대 위치 요소가 정적 (맨 위) 이미지보다 높으면 다음 내용이 이미지와 중첩됩니다.이것은 절대 포지셔닝 이미지의 높이를 식별할 수 없기 때문이다. 왜냐하면 이것은 문서 흐름 (절대 포지셔닝 요소의 정상적인 행위) 을 초과했기 때문이다.이 문제를 해결하기 위해서, 그림에 임의의 높이를 설정하려고 시도할 수도 있고, 구성 요소는 곧 매우 취약하고, 유한하며, 거칠어질 수도 있습니다.
며칠 후 음식이나 물 없이 마지막 한 방울의 통제할 수 없는 눈물을 마셨다는 것을 알게 될 것이다.여기는 어두운 곳이니 추천하지 않겠습니다.
내가 말한 예는 다음과 같다.

The good news: there is a much better way and do not attempt that first route unless you enjoy pain.

나는 두 가지 믿을 만한 방법을 써서 그림을 중첩할 것이다. 내용이 우리의 아름다운 이미지 구성 요소를 중첩하지 않도록, 나는 친근하게'이미지 창고'라고 부른다.

방법 1: CSS 메쉬

IE를 지원해야 하고 CSS 격자를 사용할 수 없다는 불평을 듣기 전에 CSS 격자를 사용할 수 있고 IE의 예비 기능을 쉽게 사용할 수 있다고 했습니다. 본고의 마지막 부분에서 어떻게 하는지 보여 드리겠습니다.
CSS 격자(fr 단원이나 min-max 속성을 제외하고)에 관해서 딘이 가장 좋아하는 것은 z 인덱스를 바꾸어 그림을 겹치는 것입니다. 정상적인 문서 흐름에서 어떤 내용도 삭제할 필요가 없습니다!

먼저 이 구성 요소를 분석합니다.

주의해야 할 몇 가지 사항:

상단이나 하단 이미지의 높이와 상관없이 구성 요소가 작동합니다.(CMS를 통해 고객이 이미지를 업로드할 때 고려해야 할 사항)

위쪽 이미지는 항상 위쪽에서 아래로 밀어 용기의 왼쪽 가장자리에 정렬됩니다.

HTML 구조

       <div class="image-stack">
          <div class="image-stack__item image-stack__item--top">
            <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/110238/texture-waves2.jpeg" alt="">
          </div>
          <div class="image-stack__item image-stack__item--bottom">
            <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/110238/portrait-1-cropped.jpg" alt="">
          </div>
       </div>

액세스 가능성 알림: 이미지가 장식 이미지(예: 물결 이미지)인 것을 알고 변경되지 않으면 role="presentation" 요소를 추가하고 화면 판독기에 나타나지 않습니다.
우리가 고려해야 할 것은 격자열의 너비이다.앞에서 말한 바와 같이, 당신은 몇 가지 방식으로 이 점을 실현할 수 있지만, 나는 12열 격자를 자주 사용하기 때문에 12열을 계속 사용할 것이다.
이를 위해 이러한 요소를 포함하는 상위 요소에서는 CSS에서 작성합니다.

      .image-stack {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        position: relative;
      }

grid-template-columns는 격자에 몇 개의 열이 있는지 표시하는 속성입니다. 1fr 값은 브라우저에서 사용 가능한 공간을 계산하는 데 사용됩니다.열과 줄 간격이 있을 때, 그것은 매우 편리하다.브라우저 계산 만세!position: relative 여기서 빠질 수 없는 것은 다음과 같다. 이것이 바로 이미지의 z 인덱스가 예상대로 작동하도록 허용하는 이유이다.
이제 격자 작업을 마쳤습니다. 다음 단계는 이미지의 폭을 보는 것입니다.

디자인에 따라 우리의 너비를 모든 이미지에 추가하기 위해서, 나의 생각은 백분율로 계산된 것이기 때문에, 우리는 이미지 구성 요소의 총 너비부터, 즉 844px, 100%와 같다.위쪽 이미지의 너비는 521px 입니다.나는 521px / 844px * 100로 나누면 61.7%, 반올림은 62%로 7/12(58%)와 8/12(66%)의 중간에 있다!66% 를 쓰라고 합니다.
맨 위 이미지의 경우 CSS에서 다음을 작성합니다.

    .image-stack__item--top {
      grid-column: 1 / span 8;
      grid-row: 1; // must be on the same row as the other image
      padding-top: 20%; // this pushes the image down, and keeps it proportional as it resizes
      z-index: 1; // make this image render on top of the bottom
    }

두 번째 그림에 대해 우리는 계산할 것이다 (645px / 844) * 100 = 76.4%.우리는 75퍼센트까지 반올림할 것이다. 이것은 우리의 12열 격자에 완전히 부합된다.9/12점.따라서 이를 위해 아래쪽 그림이 9열을 넘어 네 번째 격자선부터 시작하고 전체 격자선의 나머지 부분을 뛰어넘는 것이 -1 하는 일이다.도움이 된다면 -1 끝이라고 상상해 보세요!
아래쪽 이미지 CSS는 다음과 같습니다.

  .image-stack__item--bottom {
    grid-column: 4 / -1;
    grid-row: 1; // make this image be on the same row
  }

잠깐만, 봐!CSS 격자와 아주 적은 코드를 사용하면 이미지의 텍스트, 텍스트의 텍스트를 포함한 모든 내용을 겹치기 시작할 수 있습니다.캔버스 위의 그림.네 말이 맞다. 인터넷이 바로 너의 굴이야!Wee!

메서드 2: 음수 여백이 있는 부동 점

따라서 만약 당신이 IE를 지지해야 한다면, 이 부분은 당신을 위해 준비한 것입니다.
이런 방법은ole'dang 요소를 문서 흐름에서 삭제'정책이 필요합니다. 우리는 부동을 사용할 것입니다!
제 친구 겸 매니저가 이 해결 방안을 제시했습니다. 저는 이 해결 방안을 최근의 고객 프로젝트에 적용했습니다. 왜냐하면 우리는 IE11을 지원해야 하기 때문입니다.
좋은 소식은 구조에 아무런 변화가 없다는 것이다.image-stack 부모 요소에 대해clearfix를 추가합니다. 하위 요소를 부동하고 있기 때문에 아래에 내용을 보여야 합니다.

.image-stack::after {
  content: ' ';
  display: table;
  clear: both;
}

그런 다음 위쪽 이미지에 다음을 추가합니다.

.image-stack__item--top {
    float: left;
    width: 66%;
    margin-right: -100%;
    padding-top: 15%; // arbitrary
    position: relative;
    z-index: 1;
}

이곳의 여유는 이 일에 매우 중요하다.마이너스 이윤은 정말 이상하다.위쪽 또는 아래쪽의 음수 여백에 따라 왼쪽과 오른쪽에 음수 여백을 적용하고 부동 요소의 작동 방식에 따라 동작이 달라집니다.
우리는 부동하는 왼쪽 원소에 음의 오른쪽 거리를 적용하여 내용이 중첩되도록 허용한다 -100% 는 컨테이너의 너비와 같기 때문에 이미지를 왼쪽으로 이동하고 DOM에 없는 것처럼 아래쪽 이미지를 렌더링할 수 있습니다.
여기에 코드를 입력합니다.
만약 네가 공백에서 더 많은 정보를 얻고 싶다면, 나는 네가 읽는 것을 격려한다The Definitive Guide to Using Negative Margins.이 글은 음변의 모든 용례와 의외의 행위를 깊이 있게 탐구했다.

예비(fallback) 솔루션(CSS 메쉬 및 부동 소수점 메서드)

이 절에서는 현대 브라우저에 적용되는 현대 CSS와 IE11에 적용되는 예비 방안을 소개합니다.
여기서 가장 중요한 부분은 @supports 특징 조회이다.브라우저가 지원하는 값 display: grid 을 확인하기 위해 사용합니다.@supports 기능 조회를 추가하기 전에 먼저 IE 또는 반품 CSS를 배치합니다.일단 우리가 현대 CSS를 추가한다면, 부동은 더 이상 영향을 받지 않을 것이다. 왜냐하면 격자가 연결되고 있기 때문이다.supports 기능 검색에서, 우리는 폭을 100%로 초기화합니다. 플로트 속성을 삭제할 수도 있고, 요소에 영향을 주지 않기 때문에 보존할 수도 있습니다.
다음은 마지막 코드 펜과 예제입니다.
나는 이 문장이 너에게 도움이 되고 너의 포석 꿈을 실현하기를 바란다.앞으로 가서 모든 것을 겹쳐라!
건강하세요!