Ich möchte ein Hintergrundbild im Vollbildmodus in HTML erstellen, und CSS habe ich alle Eigenschaften für das Hintergrundbild festgelegt. Dies ist mein Hintergrundbild im Ordner.[![hier Bildbeschreibung eingeben][1]][1]
Ich versuche dies zu tun.
<style>
* {
margin: 0;
padding: 0;
}
.background-image {
background-image: url("https://via.placeholder.com/100.jpg");
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
background-size: cover;
height: 100vh;
width: 100%;
}
</style><body>
<div class="background-image"></div>
</body>Lösung des Problems
Sie könnten background-size: containstattdessen verwenden cover. Auf diese Weise wird das Bild erweitert, um den verfügbaren Platz auszufüllen, aber nicht beschnitten. Dies hinterlässt leere Bereiche um das Bild herum.
Wenn Sie möchten, dass der Hintergrund mit Farbverlauf den gesamten Bereich ausfüllt (damit Sie keine leeren Räume haben), können Sie 2 Hintergründe verwenden:
- eine mit dem Farbverlauf mit
background-size: cover - eine, wo Sie das Motiv des Bildes ausschneiden (mit Photoshop oder einem ähnlichen Programm) und mit
background-size: contain
Bearbeiten:
Ich habe ein Beispiel mit einem CSS-Gradienten gemacht. Das Kätzchen sollte das Thema sein. Ich habe es mit fester Höhe (400 Pixel) angegeben, anstatt es zu enthalten, aber auf kleineren Bildschirmen wird es das Kätzchen schneiden. Wenn Sie kein in Scheiben geschnittenes Kätzchen möchten, können Sie das 400pxim folgenden Beispiel in ändern contain.
#full-screen {
position:fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background:
center / 400px url(https://placekitten.com/400/400) no-repeat,
radial-gradient(#e66465, #9198e5);
}<body>
<div id="full-screen">
</div>
</body>
Keine Kommentare:
Kommentar veröffentlichen