斜めに区切られた背景画像

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

を...

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>

左下の部分は白い色で画像を覆うことによって行うことができます傾いた直線勾配である。