CSS：背景图像旋转而不变换：旋转（）

Question

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

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

这是现在的样子：

希望这会有所帮助:)

Answer 2

使用伪元素，将图像放入其中并以另一种方式旋转

.bg:before {
  content: "";
  position: absolute;
  top: -50%;
  left: -10%;
  right: -10%;
  height: 170%;
  z-index: -1;
  background: url(http://bagrattam.com/website/images/other/paint.png') 0 0 repeat;
  -webkit-transform: rotate(-10deg);
  -moz-transform: rotate(-10deg);
  -ms-transform: rotate(-10deg);
  -o-transform: rotate(-10deg);
  transform: rotate(-10deg);
}

不要忘记将主要元素设置为“溢出：隐藏”，这样它就不会流到外面。