CSS3带有背景图像的倾斜div，图像位于整个事物的后面

很难用语言表达我想要实现的目标，因此请查看以下图片作为示例：

---

正如您所看到的，我希望创建一个带有图案背景的倾斜div（简单），但是另一部分，倾斜部分是半覆盖的，也必须有一个背景图像。我已经想到了很多不同的想法，并尝试使用背景剪辑、背景原点、div前后和CSS三角形。在纯CSS中有什么方法可以做到这一点吗？我喜欢在这里不必将图像合并成一幅或进行任何photoshopping。

为图层设置z-index属性，并将其放置在需要的任何位置。确保使用z-index属性设置div上的位置，否则可能会出错

您需要使用倾斜变换。一个div用于顶部，另一个div用于底部，使其倾斜，然后为实际应用背景的每个部分取消倾斜一个

：before

pseudo

HTML：

<div class='wrap'>
  <div class='s'></div>
  <div class='s'></div>
</div>

.wrap { width: 4em; height: 28em; }
.s {
  overflow: hidden;
  height: 50%;
  transform: skewY(-30deg);
}
.s:before {
  display: block;
  height: 100%;
  transform: skewY(30deg);
  content: '';
}
.s:first-child:before {
  margin: 2em /* width*sin(abs(skew_angle)) = 4em*sin(30deg) */ 0 0;
  background: url(image.jpg) 50% 50%;
}
.s:last-child:before {
  margin: -2em /* -width*sin(abs(skew_angle)) */ 0 0;
  /* pattern background */
}

---

在Gimp或Photoshop中创建自定义背景图像，然后将其放入HTML代码中如何？如果容器中有一个背景图像，然后在其中有另一个倾斜相同角度的图像，会怎么样？你可以按你的意愿把它排好。