콘텐츠를 회전하지 않고 CSS에서 배경 이미지를 회전하는 방법은 무엇입니까?

콘텐츠에 영향을 주지 않고 컨테이너 내에서 배경 이미지 회전

웹 사이트 구성 요소 스타일을 지정하는 데 있어서 공통 요소 중 하나는 스크롤 막대입니다. 시각적으로 더욱 매력적인 디자인을 위해 스크롤 막대 요소를 사용자 정의할 수 있습니다. 그러나 스크롤 막대에서 배경 이미지를 회전하면 항상 예상대로 작동하지 않을 수 있습니다.

Chrome에서 배경 이미지를 회전하면 그 안의 콘텐츠도 회전할 수 있습니다. 콘텐츠를 회전하지 않고 이미지만 회전하려는 경우 가능한 해결 방법은 다음과 같습니다.

이 문제에 대한 효과적인 해결 방법은 http://www.sitepoint.com/css3-transform-Background-image/에 나와 있습니다. :

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

이 코드는 :before 선택기를 사용하여 의사 요소를 생성합니다. 이는 상위 요소 크기의 두 배 크기의 투명 상자를 절대적으로 배치하고 상위 요소 내 중앙에 배치합니다. 그런 다음 배경 이미지가 이 의사 요소에 적용되어 실제 콘텐츠와 독립적으로 회전합니다.

위 내용은 콘텐츠를 회전하지 않고 CSS에서 배경 이미지를 회전하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!