CSS 변환은 훌륭하지만 배경 이미지에는 적용되지 않습니다. 이 기사에서는 실제로 배경 이미지를 회전하거나 컨테이너 요소가 회전하는 동안 배경 이미지를 고정 상태로 유지하려는 경우에 대한 해결 방법을 제시합니다.
이 기사는 2020 년에 업데이트되었습니다.보다 고급 CSS 지식이 필요하면 책을 읽으십시오. CSS 마스터, 2 판.
CSS3를 사용하여 모든 요소의 크기 조절, 기울이기 및 회전이 가능합니다 transform 재산. 그 모든 최신 브라우저에서 지원 공급 업체 접두사가 없습니다.
#myelement { transform: rotate(30deg);
}
좋은 물건. 그러나 이렇게하면 내용, 테두리 및 배경 이미지와 같은 전체 요소가 회전합니다. 배경 이미지 만 회전 시키려면 어떻게합니까? 또는 내용이 회전하는 동안 배경을 고정 된 상태로 유지하려면 어떻게해야합니까?
에 대한 W3C CSS 제안이 없습니다 background-image 변형. 그것은 매우 유용 할 것이므로 아마도 결국에는 나타날 것이지만 오늘날 비슷한 효과를 사용하려는 개발자에게는 도움이되지 않습니다.
한 가지 옵션은 원본에서 새 배경 이미지를 만드는 것입니다 (예 : 45도 회전). 이것은 다음을 사용하여 달성 할 수 있습니다.
- 서버 측 이미지 조작 프로세스
- 클라이언트 측
canvas기반 이미지 처리 코드 또는 - 일부 이미지 호스팅 CDN 서비스에서 제공하는 API.
그러나 이러한 모든 작업에는 추가 노력, 처리 및 비용이 필요합니다.
다행히도 CSS 기반 솔루션이 있습니다. 본질적으로, 배경 이미지를 ::before or ::after 부모 컨테이너가 아닌 의사 요소. 그런 다음 의사 요소는 컨텐츠와 독립적으로 변환 될 수 있습니다.
배경 만 변형
컨테이너 요소에는 스타일을 적용 할 수 있지만로 설정해야합니다. position: relative의사 요소가 그 안에 위치하므로. 또한 설정해야합니다 overflow: hidden 컨테이너의 경계를 넘어서 배경이 쏟아지는 것을 좋아하지 않는 한.
#myelement { position: relative; overflow: hidden;
}
이제 배경이 변형 된 절대 위치의 의사 요소를 만들 수 있습니다. 그만큼 z-index 가 -1 컨테이너 내용 아래에 표시되도록 :
#myelement::before { content: ""; position: absolute; width: 200%; height: 200%; top: -50%; left: -50%; z-index: -1; background: url(background.png) 0 0 repeat; transform: rotate(30deg);
}
유사 요소의 너비, 높이 및 위치를 조정해야 할 수도 있습니다. 예를 들어 반복되는 이미지를 사용하는 경우 회전 된 영역이 컨테이너보다 커야 배경을 완전히 덮을 수 있습니다.
변형 된 요소의 배경 고정
부모 컨테이너의 모든 변환은 의사 요소에 적용됩니다. 그러므로 우리는 취소 그 변화. 예를 들어, 컨테이너가 30도 회전하면 배경을 원래 위치로 되돌리려면 -30도 회전해야합니다.
#myelement { position: relative; overflow: hidden; transform: rotate(30deg);
} #myelement::before { content: ""; position: absolute; width: 200%; height: 200%; top: -50%; left: -50%; z-index: -1; background: url(background.png) 0 0 repeat; transform: rotate(-30deg);
}
배경이 부모 컨테이너를 적절하게 덮을 수 있도록 크기와 위치를 조정해야합니다.
CodePen에 관한 데모는 다음과 같습니다.
펜보기
배경 이미지에서 CSS3 변환 SitePoint 별 (@사이트포인트)
on 코드 펜.
이 효과는 모든 주요 브라우저와 Internet Explorer에서 버전 9로 다시 작동합니다. 이전 브라우저는 변형을 표시하지 않지만 배경은 여전히 나타납니다.
출처 : https://www.sitepoint.com/css3-transform-background-image/?utm_source=rss
