Erstellen Sie eine statische Überblendung am unteren Rand eines Hintergrundbildes

Question

Ich habe eine Eigenschaft für den Körper festgelegt, für einen Hintergrund mit einer festen Breite und Höhe, aber mit einem vertikalen Versatz von einer bestimmten Anzahl von Pixeln. Bei größeren Bildschirmen ist es jedoch möglich, dass das Hintergrundbild endet, was zu einem weißen Hintergrund führt.

Ist es möglich, einen weißen statischen Fade-Effekt am unteren Ende des Bildes zu erzeugen, so dass kein Körper mit irgendeiner Bildschirmauflösung das Ende des Bildes bemerken würde?

Ich habe versucht mit

-moz-linear-gradient(to bottom, 
     rgba(255,255,255,0) 80%, 
     rgba(255,255,255,1) 100% 
    ), 

jedoch, da sich dynamisch ändern kann der Offset, ich habe einige Schwierigkeiten gefunden ausgerichtet, den Gradienten und den Hintergrund zu halten.

Können Sie mir einen schnelleren Weg vorschlagen, um dieses Ergebnis zu erzielen? (Oder eine andere Technik, die Hintergrund-End-Problem zu umgehen)

Vielen Dank im Rat

Answer 1

Probieren Sie etwas wie folgt aus: https://codepen.io/lauraeddy/pen/aLYLGX

HTML:

<div class="image"> 
    <img src="/your-image"/> 
    <div class="fade"></div> 
</div> 

CSS:

.image { position: relative; } 
.image img { display: block; position: relative; z-index: 1; width: 100%; } 
.image .fade { position: absolute; bottom: 0; width: 100%; height: 150px; z-index: 2; background: rgba(255, 255, 255, 0) linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 80%) repeat scroll 0 0; } 

Auf diese Weise richten Sie das "Fade" -Element auf den Bott aus om der '.image' div, die die Höhe des Bildelements sein sollte.

Möglicherweise müssen Sie die Höhe des Dives '.image .fade' auf das ändern, was am besten aussieht.