html - 仅倾斜背景图像

Question

我只想倾斜背景图像，但我已将其创建为外部元素，所以现在整个外部元素都会倾斜，而不仅仅是图像。我在网络开发方面没有经验，因此感谢任何帮助或建议。下面是代码片段，这里是一个 JSFiddle

.vertical-center {
  min-height: 100%;
  /* Fallback for browsers do NOT support vh unit */
  min-height: 100vh;
  /* These two lines are counted as one :-)       */
  display: flex;
  align-items: center;
}

.gallery-main {
  background: url('http://www.diong.co.uk/laurentino/wp-content/themes/laurentinoazavedo/assets/img/poppy.png') 50% 0 no-repeat fixed;
  -webkit-background-size: 30%;
  -moz-background-size: 30%;
  -o-background-size: 30%;
  background-size: 30%;
  /*    height: 100vh;*/
  text-align: center;
  background-position: right;
  background-color: #EDEAE3;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

.gallery-main:hover {
  -webkit-transform: rotate(-10deg);
  -moz-transform: rotate(-10deg);
  -o-transform: rotate(-10deg);
  -ms-transform: rotate(-10deg);
}

.about-main {
  background: url('http://www.diong.co.uk/laurentino/wp-content/themes/laurentinoazavedo/assets/img/orchid.png') 50% 0 no-repeat fixed;
  -webkit-background-size: 30%;
  -moz-background-size: 30%;
  -o-background-size: 30%;
  background-size: 30%;
  /* height: 100vh; */
  text-align: center;
  background-position: left;
  background-color: #EFEDE6;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

.about-main:hover {
  -webkit-transform: rotate(10deg);
  -moz-transform: rotate(10deg);
  -o-transform: rotate(10deg);
  -ms-transform: rotate(10deg);
}

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<a href="#">
  <section class="gallery-main">
    <div class="container-fluid vertical-center">
      <div class="row">
        <div class="col-sm-12 col-sm-offset-8">
          <h2>GALLERY</h2>
          <p>We create everlasting memories.</p>
        </div>
        <!-- end col -->
      </div>
      <!-- row -->
    </div>
  </section>
</a>
<a href="#">
  <section class="about-main">
    <div class="container-fluid vertical-center">
      <div class="row">
        <div class="col-sm-12 col-sm-offset-10">
          <h2>ABOUT</h2>
          <p class="larger-font">Working with natural wonders to illustrate the clean lines of modern design.</p>
        </div>
        <!-- end col -->
      </div>
      <!-- row -->
    </div>
    <!-- hero -->
  </section>
</a>

Answer 1

首先，您需要将背景重新分配给另一个标签，它不应该是该部分的包装器(例如，您可以使用像 :before 或 :after 这样的伪元素)。

你的代码应该是这样的:

.gallery-main {
   position: relative
/* Don't use rotate effect for section wrapper */
}

.gallery-main:before{

  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;

   background: url('http://www.diong.co.uk/laurentino/wp-content/themes/laurentinoazavedo/assets/img/poppy.png') 50% 0 no-repeat fixed;
  -webkit-background-size: 30%;
  -moz-background-size: 30%;
  -o-background-size: 30%;
  background-size: 30%;
  background-position: right;
  background-color: #EDEAE3;

text-align: center;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

.gallery-main:hover:before {
  -webkit-transform: rotate(-10deg);
  -moz-transform: rotate(-10deg);
  -o-transform: rotate(-10deg);
  -ms-transform: rotate(-10deg);
}

第一部分的工作代码你可以看到here