偏斜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;
}

Answer 2

该图像没有偏斜..

＆＃13;

＆＃13;

div{
display:inline-block;
	margin:10px;
	postion:relative;
	width:100px;
	height:100px;
	background:cyan;
}

div.covered{
background:
	linear-gradient(20deg,white,white,40px,transparent 40px,transparent),cyan;
}

＆＃13;

<div>
normal
</div>
<div class="covered">
covered
</div>

＆＃13;

＆＃13;

＆＃13;

左下角部分可以通过覆盖带有倾斜线性渐变的白色图像来完成。