html - 倾斜的div中的背景图像

Question

这里有问题。我有一个完美的倾斜 div，但现在我希望图像不平铺地适合它，所以如果有人能提供帮助，那就太棒了。

我要这样做:

到目前为止，我有这个:

HTML

<div class="box"></div>

CSS

.box {
position:relative;
width:100%;
height:500px;
background: url(../images/clouds.jpeg);
background-size:contain;
padding:10px;
margin-bottom:100px; 

.box:after {
position:absolute;
content:'';
width:100%;
height:100%;
top:0;
left:0;
right:0;
background:inherit;
background-size:contain;
transform-origin: top left;
transform:skewY(10deg);
z-index: -1;

Answer 1

如果你想让img填满整个容器，你应该使用background-size: cover，然后使用background-repeat: no-repeat得到一张图片.

类似的东西应该可以工作:

.box {
  position:relative;
  width:100%;
  height:500px;
  background: url(../images/clouds.jpeg);
  background-size:cover;
  background-repeat: no-repeat;
  padding:10px;
  margin-bottom:100px;
}