6 interessante Tipps zum Einstellen von CSS-Hintergrundbildern
|
Das Hintergrundbild ist wahrscheinlich eine dieser CSS-Eigenschaften, die jeder Front-End-Entwickler im Laufe seiner Karriere mindestens ein paar Mal verwendet hat. Die meisten Leute denken, dass an Hintergrundbildern nichts Ungewöhnliches ist, aber ... . . . . . 1. So passen Sie das Hintergrundbild perfekt an das Ansichtsfenster an
Körper {
Hintergrundbild: URL ('https://images.unsplash.com/photo-1573480813647-552e9b7b5394?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2253&q=80');
Hintergrundwiederholung: keine Wiederholung;
Hintergrundposition: Mitte;
Hintergrundanhang: behoben;
Hintergrundgröße: Abdeckung;
-webkit-Hintergrundgröße: Abdeckung;
-moz-Hintergrundgröße: Abdeckung;
-o-Hintergrundgröße: Abdeckung;
}background-attachment legt fest, ob das Hintergrundbild fixiert ist oder mit dem Rest der Seite scrollt.
2. So verwenden Sie mehrere Hintergrundbilder in CSS
Körper {
Hintergrundbild: URL (https://image.flaticon.com/icons/svg/748/748122.svg), URL (https://images.unsplash.com/photo-1478719059408-592965723cbc?ixlib=rb-1.2.1&auto=format&fit=crop&w=2212&q=80);
Hintergrundposition: Mitte, oben;
Hintergrundwiederholung: Wiederholung, keine Wiederholung;
Hintergrundgröße: enthalten, abdecken;
}
3. So erstellen Sie das dreieckige Hintergrundbild Wenn wir völlig unterschiedliche Optionen anzeigen möchten, wie Tag und Nacht oder Winter und Sommer. Dies geschieht, indem zwei Divs für das gesamte Ansichtsfenster erstellt werden. Anschließend müssen Sie beiden ein Hintergrundbild hinzufügen. Das zweite Div benötigt dann eine Clip-Pfad-Eigenschaft, um das Dreieck zu erstellen.
<Text>
<div Klasse="Tag"></div>
<div Klasse="Nacht"></div>
</body>
Körper {
Rand: 0;
Polsterung: 0;
}
div {
Position: absolut;
Höhe: 100vh;
Breite: 100vw;
}
.Tag {
Hintergrundbild: URL("https://images.unsplash.com/photo-1477959858617-67f85cf4f1df?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2613&q=80");
Hintergrundgröße: Abdeckung;
Hintergrundwiederholung: keine Wiederholung;
}
.Nacht {
Hintergrundbild: URL("https://images.unsplash.com/photo-1493540447904-49763eecf55f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80");
Hintergrundgröße: Abdeckung;
Hintergrundwiederholung: keine Wiederholung;
Clip-Pfad: Polygon (100 VW 0, 0 % 0 VH, 100 VW 100 VH);
}
4. Wie füge ich meinem Hintergrundbild eine Farbverlaufsüberlagerung hinzu? Dies ist nützlich, wenn Sie Text auf ein Bild setzen möchten, der Hintergrund jedoch zu hell ist, um den Text klar zu erkennen. Außerdem kann es das Bild selbst verbessern.
Körper {
Hintergrundbild:
linearer Farbverlauf (4 Grad, rgba (38,8,31,0,75) 30 %, rgba (213,49,127,0,3) 45 %, rgba (232,120,12,0,3) 100 %),
url("https://images.unsplash.com/photo-1503803548695-c2a7b4a5b875?ixlib=rb-1.2.1&auto=format&fit=crop&w=2250&q=80");
Hintergrundgröße: Abdeckung;
Hintergrundwiederholung: keine Wiederholung;
Hintergrundanhang: behoben;
Hintergrundposition: Mitte
}
5. So erstellen Sie ein Raster-Hintergrundbild Erstellen Sie mit CSS Grid und CSS background-image ein schönes Hintergrundbild <Text> <div Klasse="Container"> <div Klasse="item_img"></div> <div Klasse="Artikel"></div> <div Klasse="item_img"></div> <div Klasse="Artikel"></div> <div Klasse="Artikel"></div> <div Klasse="item_img"></div> <div Klasse="Artikel"></div> <div Klasse="item_img"></div> <div Klasse="Artikel"></div> <div Klasse="Artikel"></div> <div Klasse="item_img"></div> <div Klasse="Artikel"></div> <div Klasse="item_img"></div> <div Klasse="Artikel"></div> <div Klasse="item_img"></div> <div Klasse="Artikel"></div> </div> </body>
Körper {
Rand: 0;
Polsterung: 0;
}
.container {
Position: absolut;
Breite: 100 %;
Höhe: 100%;
Hintergrund: schwarz;
Anzeige: Raster;
Rastervorlagenspalten: 25fr 30fr 40fr 15fr;
Raster-Vorlagenzeilen: 20fr 45fr 5fr 30fr;
Rasterabstand: 20px;
.item_img {
Hintergrundbild: URL ('https://images.unsplash.com/photo-1499856871958-5b9627545d1a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2207&q=80');
Hintergrundwiederholung: keine Wiederholung;
Hintergrundposition: Mitte;
Hintergrundanhang: behoben;
Hintergrundgröße: Abdeckung;
}
}
6. So legen Sie das Hintergrundbild als Textfarbe fest Durch die Verwendung eines Hintergrundbildes in Verbindung mit einem Hintergrundclip können Sie einen schönen Effekt des Hintergrundbildes auf dem Text erzielen. Dies kann in bestimmten Situationen sehr nützlich sein, insbesondere wenn Sie einen größeren Texttitel erstellen möchten, der nicht so langweilig ist wie eine einfache Farbe.
<Text>
<h1>Hallo Welt!</h1>
</body>
Körper {
Anzeige: Flex;
Elemente ausrichten: zentrieren;
Inhalt ausrichten: zentriert;
Flex-Richtung: Spalte;
Breite: 100 %;
Textausrichtung: zentriert;
Mindesthöhe: 100vh;
Schriftgröße: 120px;
}
h1 {
Hintergrundbild: URL("https://images.unsplash.com/photo-1462275646964-a0e3386b89fa?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2600&q=80");
Hintergrundclip: Text;
-webkit-background-clip: Text;
Farbe: transparent;
}
Zusammenfassen Damit ist dieser Artikel über 6 interessante Tipps für CSS-Hintergrundbildeinstellungen abgeschlossen. Weitere relevante CSS-Hintergrundbildinhalte finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen! |
>>: Implementierungsbeispiel für den Bildupload mit Vue+Element+Springboot
Artikel empfehlen
MySQL-Join-Abfragesyntax und Beispiele
Verbindungsabfrage: Es ist das Ergebnis der paarw...
Code zum Anzeigen des Inhalts eines TXT-Buchs auf einer Webseite
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML ...
JS Asynchronous Stack Tracing: Warum „await“ besser ist als „Promise“
Überblick Der grundlegende Unterschied zwischen a...
Stellen Sie das Vue-Projekt auf einem Linux-Server bereit
Fall 1 vue-cli erstellt das vue3-Projekt, lädt da...
Implementierung der Fastdfs+Nginx-Clusterkonstruktion
1. Einführung in Fastdfs 1. Was ist Fastdfs? Fast...
Grafisches Tutorial zur Installations- und Konfigurationsmethode für die Dekomprimierungsversion von MySQL 5.7.21 (Win10)
Die Installations- und Konfigurationsmethode der ...
Detaillierte Erklärung des Unterschieds zwischen Docker-Compose-Ports und Expose
Es gibt zwei Möglichkeiten, Container-Ports in Do...
Lösung für das Problem, dass MySQL zwar bei der Installation in WAMP gestartet werden kann, nach dem Neustart jedoch nicht mehr
Nach der ersten Installation von Wamp können alle...
Verschiedene Implementierungsmethoden von Vue zum Ändern von übergeordneten Komponenteneigenschaften durch untergeordnete Komponenten
Inhaltsverzeichnis Vorwort Gängige Methoden 1. Än...
Zusammenfassung der allgemeinen MySQL-Funktionen
Vorwort: Die MySQL-Datenbank bietet eine breite P...
Detaillierte Analyse der Replikation in MySQL
1.MySQL-Replikationskonzept Dies bedeutet, dass d...
JavaScript zum Erzielen eines Zeitlupenanimationseffekts
In diesem Artikel wird der spezifische Code für J...
Der Prozess der Bereitstellung eines Projekts auf einem anderen Host mit Jenkins
Umfeld Hostname IP-Adresse Aufschlag Jenkins 192....
MariaDB unter Linux startet mit dem Root-Benutzer (empfohlen)
Da ich Sicherheitsprodukte testen musste, wollte ...
Lizenzschlüssel für VMware Workstation Pro 16 mit Nutzungs-Tutorial
VMware Workstation ist eine leistungsstarke virtu...