CSS：background-image旋转而不变换：rotate（）

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

使用psuedo元素，将图像放入其中并以其他方式旋转

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

不要忘记设置主要元素'overflow：hidden'，这样它就不会流到外面了。

Answer 2

为此，请从.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);
}

现在看来是这样的：

希望这会有所帮助：）