如何在 CSS 中旋转背景图像而不旋转其内容？

在容器内旋转背景图像而不影响内容

在设计网站组件样式时，一个常见的元素是滚动条。为了获得更具视觉吸引力的设计，您可能需要自定义滚动条元素。但是，旋转滚动条上的背景图像可能并不总是符合预期。

在 Chrome 中，旋转背景图像也可能会旋转其中的内容。如果您希望旋转图像而不旋转其内容，这里有一个潜在的解决方案：

http://www.sitepoint.com/css3-transform-b​​ackground-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中文网其他相关文章！