CSS-Code zum Erreichen eines Hintergrundverlaufs und automatischen Vollbilds

CSS-Code zum Erreichen eines Hintergrundverlaufs und automatischen Vollbilds

CSS-Probleme mit dem Hintergrundverlauf und dem automatischen Vollbild

Bei der Entwicklung von CSS ist der Chefredakteur auf ein fatales Problem gestoßen:
Nachdem ich den Hintergrundfarbverlauf eingestellt hatte, passte ich ihn schließlich auf die Vollbildabdeckung an, aber als ich F11 drückte, begann die Welt des Zusammenbruchs. In diesem Artikel werden daher hauptsächlich CSS-Hintergrundfarbverlaufsfarben und automatische Vollbildanpassungen vorgestellt.

Hintergrundverlaufsfarbe

Dieser Artikel stellt nur lineare Gradienten vor

Ich glaube, jeder kennt den Hintergrundverlauf. Schauen wir uns das Bild unten an.

Die Farbe, die ich gefunden habe, ist auch in Ordnung. Der Code lautet wie folgt

Körper{
    Hintergrundbild:
    -webkit-linear-gradient(60 Grad, rgba(218, 169, 215, 0,637), rgba(128, 174, 235, 0,904));
    //60 Grad stellt den Winkel der Verlaufsfarbe dar. Sie können es selbst ausprobieren. //Die Verlaufsfarbe ist das Ergebnis der letzten beiden Farbkombinationen. Natürlich können Sie auch die dritte einstellen.}

Hintergrund im Vollbildmodus

Wie Sie oben sehen können, ist der Hintergrund mit Farbverlauf nicht bildschirmfüllend, was sich auch auf das Erscheinungsbild auswirkt. Aber zu diesem Zeitpunkt muss jemand sagen, dass der Editor die Breite und Höhe nicht eingestellt hat. Nun, lassen Sie uns die Breite und Höhe einstellen, um den Effekt zu sehen.
Körper{
    Hintergrundbild: -webkit-linear-gradient(60 Grad, rgba(218, 169, 215, 0,637), rgba(128, 174, 235, 0,904));
    Mindesthöhe: 648px;
}

Die Wirkung ist wie folgt:

Das Problem besteht also darin, dass wenn ich F11 drücke, um das Fenster zu maximieren:

Offensichtlich wurde das Problem nicht vollständig gelöst, daher hier der adaptive Bildschirmcode für Sie

Körper{
    Hintergrundbild: -webkit-linear-gradient(60 Grad, rgba(218, 169, 215, 0,637), rgba(128, 174, 235, 0,904));
    Hintergrundposition: Mitte 0;
    Hintergrundwiederholung: keine Wiederholung;
    Hintergrundanhang: behoben;
    Hintergrundgröße: Abdeckung;
    -webkit-Hintergrundgröße: Abdeckung;
    -o-Hintergrundgröße: Abdeckung;
    -moz-Hintergrundgröße: Abdeckung;
    -ms-background-size: Abdeckung;
}
//Der Editor hat getestet, ob sich Google Chrome und der Xingyuan-Browser automatisch anpassen können. //Sie können es mit nach Hause nehmen und weitere Experimente durchführen

Das Wirkungsdiagramm sieht wie folgt aus:

Damit ist dieser Artikel über die Verwendung von CSS zur Implementierung von Hintergrundverläufen und automatischem Vollbild abgeschlossen. Weitere Informationen zu CSS-Hintergrundverläufen und automatischem Vollbild finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!

<<:  Sprechen Sie über die 8 Benutzerinstinkte hinter der Benutzererfahrung im Design

>>:  Interviewfrage: Dreizeiliges und dreispaltiges Layout, Tabellen werden zusammengeführt und verschachtelte Tabellen sind nicht zulässig

Artikel empfehlen

FTP-Remoteverbindung zu Linux über SSH

Installieren Sie zunächst SSH in Linux. Nehmen Si...

So installieren Sie Tomcat8 im Docker

1. Installieren Sie Tomcat8 mit Docker 1. Suchen ...

js zur Realisierung des Mausverfolgungsspiels

In diesem Artikel wird der spezifische Code von j...

Detaillierte Erläuterung des MySQL Master-Slave-Replikationsprozesses

1. Was ist Master-Slave-Replikation? Die DDL- und...

Detaillierte Erklärung der Entwurfsmuster des JavaScript-Frameworks

Inhaltsverzeichnis mvc MVP mvv Die Quelle von Vue...

Ausführliche Erläuterung der HTML-Grundlagen (Teil 1)

1. Das WEB verstehen Webseiten bestehen hauptsäch...

CSS3-Mauszeiger-Übergangszoomeffekt

Das Folgende ist ein Bild-Zoom-Effekt, der in rei...

Ursachen und Lösungen für die Front-End-Ausnahme 502 Bad Gateway

Inhaltsverzeichnis 502 Bad Gateway Fehlerbildung ...

React tsx generiert einen zufälligen Bestätigungscode

React tsx generiert einen zufälligen Bestätigungs...

Detaillierte Erklärung der Set-Datenstruktur von JavaScript

Inhaltsverzeichnis 1. Was ist Set 2. Konstruktor ...

Beispielcode zur Implementierung eines zufälligen Roll Callers in HTML

Nachdem dieses Namensaufrufgerät mit dem Aufruf d...

SQL IDENTITY_INSERT-Fallstudie

Wenn eine Spalte in einer Datentabelle einmal als...

Detaillierte Erläuterung des Datenproxys und der Ereignisse von VUE

Inhaltsverzeichnis Überprüfung der Object.defineP...