Question

我已经为div添加了背景图像，但由于div已经旋转，因此背景图像也是如此。如何旋转图像，与之相反的方式直接显示？

HTML

<section id="about-hero-img"></section>

CSS

#about-hero-img {
-webkit-transform: rotate(-2deg);
-moz-transform: rotate(-2deg);
-o-transform: rotate(-2deg);
-ms-transform: rotate(-2deg);
transform: rotate(-2deg);
width: 1030px; margin-left: -50px; margin-top: 20px; height: 200px; background-image: url('../Images/about-header-img.jpg'); padding-top: 30px; }

Answer 1

将背景图像移动到标题的前面的伪元素

#about-hero-img {
    -webkit-transform: rotate(-2deg);
    -moz-transform: rotate(-2deg);
    -o-transform: rotate(-2deg);
    -ms-transform: rotate(-2deg);
    transform: rotate(-2deg);
    width: 1030px;
    margin-left: -50px;
    margin-top: 20px;
    height: 200px;
    /* background-image: url('../Images/about-header-img.jpg'); */
    padding-top: 30px;
    position: relative;
}
#about-hero-img:before {
    width: 1030px;
    height: 230px;
    position: absolute;
    left: 0;
    top: 0;
    content: ' ';
    background-image: url('../Images/about-header-img.jpg');
    -webkit-transform: rotate(2deg);
    -moz-transform: rotate(2deg);
    -o-transform: rotate(2deg);
    -ms-transform: rotate(2deg);
    transform: rotate(2deg);
}

从旋转的div旋转背景图像

1 个答案: