css - 从旋转的 div 旋转背景图像

Question

我已将背景图像添加到 div，但由于 div 已旋转，因此背景图像也已旋转。我怎样才能以相反的方式旋转图像，使其看起来是直线的？

直播网址:http://bit.ly/1iqXQRN

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

将背景图像移动到标题的 :before 伪元素

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