CSS中旋转容器时如何保持背景图像位置固定？

在容器旋转期间保留图像位置

在 Web 开发中，旋转容器背景图像而不影响其内容可能是一项具有挑战性的任务。当对容器应用变换旋转时，图像内容通常也会随之变化。为了解决这个问题，让我们探索一种将图像内容保持在原始位置的解决方案。

使用 CSS 变换实现背景图像旋转

考虑以下 CSS，它尝试旋转某个对象的背景图像垂直滚动条递减按钮：

::-webkit-scrollbar-button:vertical:decrement {
    background-image: url(images/arrowup.png);
    -webkit-transform: rotate(120deg);
    -moz-transform: rotate(120deg);
    ...
}

不幸的是，这种方法会旋转图像及其内容。为了防止这种情况，请参阅下面链接的文章以获得全面的解决方案：

• [http://www.sitepoint.com/css3-transform-b​​ackground-image/](http://www .sitepoint.com/css3-transform-b​​ackground-image/)

解决方案：带有反转的伪元素旋转

提供的解决方案使用伪元素创建虚拟图像层并对其应用反向旋转：

#myelement:before {
    content: "";
    ...
    background: url(background.png) 0 0 repeat;
    transform: rotate(-30deg);
}

此方法本质上偏移了容器的旋转，留下图像内容到位。请注意，您可能需要调整旋转角度和其他值才能达到您的特定设计所需的结果。

以上是CSS中旋转容器时如何保持背景图像位置固定？的详细内容。更多信息请关注PHP中文网其他相关文章！