콘텐츠를 회전하지 않고 CSS에서 배경 이미지를 어떻게 회전할 수 있나요?

콘텐츠에 영향을 주지 않고 배경 이미지 회전

CSS를 사용하여 컨테이너 내에서 배경 이미지를 회전하려고 할 때 다음과 같은 문제가 발생하는 것이 일반적입니다. 이미지 콘텐츠도 회전합니다. 이는 원하는 시각적 효과를 방해할 수 있으므로 실망스러운 제한 사항처럼 보일 수 있습니다. 이 문제에 대한 한 가지 효과적인 해결책은 Sitepoint의 통찰력 있는 토론에서 소개된 기술에 있습니다.

이 접근 방식에는 의사 요소(예: :before)를 생성하고 컨테이너 내에 절대적으로 배치하는 것이 포함됩니다. 의사 요소의 너비, 높이 및 오프셋을 조작하여 배경 이미지에 대한 별도의 캔버스 역할을 할 수 있습니다. 결정적으로 변형 속성이 의사 요소에 적용되어 원본 내용은 그대로 유지하면서 배경 이미지를 회전합니다.

간단한 예는 다음과 같습니다.

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

이 예에서 # myelement의 :의사 요소 이전에는 전체 컨테이너 영역을 덮을 수 있도록 백분율을 사용하여 절대 위치와 크기가 지정됩니다. 배경 이미지는 background 속성을 사용하여 설정하고 의사 요소에 적용된 변환:rotate(30deg)는 이미지를 30도 회전시킵니다.

이 기술을 사용하면 배경 이미지를 독립적으로 회전할 수 있습니다. 페이지의 레이아웃이나 기능을 방해하지 않고 원하는 시각적 효과를 얻을 수 있습니다.

위 내용은 콘텐츠를 회전하지 않고 CSS에서 배경 이미지를 어떻게 회전할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!