歪斜的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

您应该使用background-size: cover，如果你想在img充满整个容器，然后用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

这种形象不歪斜..

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

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

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

左下部分可以通过覆盖白色的彩色图像进行倾斜的线性渐变。