obraz tła w skośnym div - html, css

tu masz problem. Mam doskonały przekrój div, ale teraz chcę, żeby obraz pasował do niego bez kafelków, więc jeśli ktoś może pomóc, to będzie niesamowite.

Idę na to:

I do tej pory mam to:

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;

}

Odpowiedzi:

Powinieneś użyć background-size: cover jeśli chcesz, aby img wypełnił cały pojemnik, a następnie użyj background-repeat: no-repeatmieć jedno zdjęcie.

Coś takiego powinno działać:

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

Ten obraz nie jest zniekształcony ...

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

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

Dolną lewą część można wykonać, pokrywając obraz kolorem białym z nachylonym gradientem liniowym.