Skew Boden Hintergrund css

Question

Ich mag meine Mockup reproduzieren: http://imgur.com/ZsR88fe

Aber ich weiß nicht, wie mein Hintergrundbild verzerren, nur am unteren Ende. Für nom versuche ich den transform skew aber das Bild ist schief und die Oberseite der Seite sieht hässlich aus: http://imgur.com/TkUgppW

Was kann ich tun, um es zu beheben?

Vielen Dank im Voraus

Answer 1

Um eine untere Skew für Ihr Bild mit CSS zu machen, sind Sie brauchen werde ein paar Wrapper:

• Inhalt div für den Text alle
• Bild Wrapper, wird erstellen Sie die Skew und blenden Sie die schiefe Fläche
• Bild div, die nichts anderes als der Held Bild enthält

Dann müssen Sie den entgegengesetzten Schrägstrich auf das Bild div anwenden, um es nicht verzerrt zu machen. Danach müssen Sie mit der Positionierung herumspielen, um sicherzustellen, dass so viel von dem Bild sichtbar ist und die obere Schräglage verborgen ist. Vielleicht gibt es eine cleverere Lösung, ich benutze nur hartkodierte Pixelwerte.

Here's the demo, und hier ist der wichtige Bits:

HTML

<div class="hero"> 
    <div class="bg-img-wrapper"> 
    <div class="bg-img"></div> 
    </div> 
    <div class="hero-content"> 
    <h1>Cool company slogan</h1> 
    <p>Catchy subslogan</p> 
    </div> 
</div> 

SCSS (die Variablen nur ersetzen kann und wird es gültiges CSS, aber sie helfen mit Ablesbarkeit hier)

$skewDeg: 5deg; 
$offset: 70px; 

.hero { 
    height: 100vh; // Make the hero area take 100% height 
    overflow: hidden; // Child's skew will cause overflow, so we hide it here 
    position: relative; // Children will be positioned absolutely relative to this 
} 

.bg-img-wrapper { 
    transform: skewY($skewDeg); 
    position: absolute; 
    top: -$offset; // Move the top skew offscreen 
    bottom: $offset; // Move the skewed area up a bit so more of it is visible 
    right: 0; 
    left: 0; 
    overflow: hidden; // Hide the areas that we skewed away 
} 

.bg-img { 
    background: url('https://unsplash.it/1280/720/?random') center no-repeat; 
    background-size: cover; 
    position: absolute; 
    top: $offset; // Move the image down by the amount of the parent that's being rendered offscreen 
    bottom: -$offset; 
    right: 0; 
    left: 0; 
    transform: skewY(-$skewDeg); // Skew the opposite amount of the parent to make the image straight again 
} 

.hero-content { 
    position: relative; // Relative positioning here makes the hero content visible 
}