CSS:背景图像旋转而不转换:rotate()

Question

我旋转了给定背景图像的 block ，我需要不旋转图像，但要旋转给定图像的 block 。

page link我必须做什么？

谢谢。

CSS:

   .bg {
        background-image: url("http://bagrattam.com/sss/website/images/other/paint.png");
        background-repeat: no-repeat;
        background-size: cover;
        position: absolute;
        top: -50%;
        left: -10%;
        right: -10%;
        height: 170%;
        z-index: -1;
        transform: rotate(-10deg);
    }

Answer 1

为此，从 .bg 类的 CSS 中删除旋转并将其高度从 170% 增加到 225%:

.bg {
    background-image: url(http://bagrattam.com/website/images/other/paint.png);
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    top: -50%;
    left: -10%;
    right: -10%;
    height: 225%;
    z-index: -1;
    transform: rotate(0deg);
}

然后使用 :after 伪类在图像上添加旋转叠加层，从而添加倾斜效果:

.bg:after {
    content: "";
    font-size: 200px;
    background: #ffffff;
    display: block;
    position: absolute;
    height: 500px;
    left: 0;
    right: 0;
    bottom: -350px;
    transform: rotate(-8deg);
}

这是现在的样子:

希望这有帮助:)