Html 仅倾斜背景图像

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

。垂直中心{
最小高度：100%；
/*浏览器的回退不支持vh单元*/
最小高度：100vh；
/*这两行算作一行：-）*/
显示器：flex；
对齐项目：居中；
}
.主画廊{
背景：url（'http://www.diong.co.uk/laurentino/wp-content/themes/laurentinoazavedo/assets/img/poppy.png'）50%0无重复固定；
-webkit背景大小：30%；
-moz背景大小：30%；
-o-背景尺寸：30%；
背景大小：30%；
/*高度：100vh*/
文本对齐：居中；
背景位置：右；
背景色：#EDEAE3；
-webkit过渡：所有0.5s轻松；
-moz过渡：所有0.5s轻松；
-o型过渡：所有0.5s的轻松度；
-ms过渡：所有0.5s轻松；
过渡：所有0.5s缓解；
}
.主画廊：悬停{
-webkit变换：旋转（-10度）；
-moz变换：旋转（-10度）；
-o变换：旋转（-10度）；
-ms变换：旋转（-10度）；
}
.关于main{
背景：url（'http://www.diong.co.uk/laurentino/wp-content/themes/laurentinoazavedo/assets/img/orchid.png'）50%0无重复固定；
-webkit背景大小：30%；
-moz背景大小：30%；
-o-背景尺寸：30%；
背景大小：30%；
/*高度：100vh*/
文本对齐：居中；
背景位置：左；
背景色：#EFEDE6；
-webkit过渡：所有0.5s轻松；
-moz过渡：所有0.5s轻松；
-o型过渡：所有0.5s的轻松度；
-ms过渡：所有0.5s轻松；
过渡：所有0.5s缓解；
}
.关于main:悬停{
-webkit变换：旋转（10度）；
-moz变换：旋转（10度）；
-o变换：旋转（10度）；
-ms变换：旋转（10度）；
}

---

首先需要将background重新分配给另一个标记，它不应该是本节的包装（例如，可以使用伪元素，如：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);
}

---

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

这就是我一直在努力解决的问题，试图找出如何将背景分配给不同的标记，或者重新分配标记，使其仅具有花倾斜，而不是整个部分标记。请参见上面的代码示例。我为第一部分的pseudo-element:before指定了背景。你也可以在Thank you@Ihor上看到一个活生生的例子，我将如何使花朵倾斜，而不是整个背景。我不想看到背景的白色部分。我认为你可以使用与照片上相同的背景色作为你的版面包装。我找到了。它是#edeae3；你可以看看我的小提琴。我已经更新过了。看看这个fiddle jsfiddle.net/p1fzvvuL/4