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
So installieren Sie Windows Server 2008 R2 auf einem Dell R720-Server
Hinweis: Alle Bilder in diesem Artikel stammen au...
So ändern Sie den Speicherort des MySQL-Datenbankverzeichnisses unter Linux (CentOS)
So ändern Sie den Speicherort des MySQL-Datenbank...
Konventionelle JS-Verarbeitungsfunktionen für die Entwicklung von Vue Element-Frontend-Anwendungen
Inhaltsverzeichnis 1. Filtern, Zuordnen und Reduz...
So ändern Sie den Inhalt eines vorhandenen Docker-Containers
1. Docker ps listet Container auf 2. Docker cp ko...
js Canvas realisiert zufällige Partikeleffekte
In diesem Artikelbeispiel wird der spezifische Co...
IDEA-Konfigurationsprozess von Docker
IDEA ist das am häufigsten verwendete Entwicklung...
So lassen Sie eine Remoteverbindung in MySql zu
So lassen Sie eine Remoteverbindung in MySql zu U...
Beispielcode zum Implementieren eines gleichbreiten Layouts auf verschiedene Arten mithilfe von CSS
Das in diesem Artikel beschriebene gleichbreite L...
So erstellen Sie einen Elastic-Stack-Cluster mit mehreren Knoten auf RHEL8/CentOS8
Elastic Stack, allgemein bekannt als ELK Stack, i...
Verwenden Sie Docker, um ein verteiltes lnmp-Image zu erstellen
Inhaltsverzeichnis 1. Verteilte LNMP-Image-Produk...
Beispielanweisungen für Indizes und Einschränkungen in MySQL
Fremdschlüssel Abfrage, bei welchen Tabellen der ...
Einführung in die Vue-Grundlagen: Installation und Verwendung von Vuex
Inhaltsverzeichnis 1. Was ist vuex 2. Installatio...
Grundlegende Anweisungen der MySQL-Datendefinitionssprache DDL
MySQL DDL-Anweisungen Was ist DDL, DML. DDL ist e...
Natives JS-objektorientiertes Tippspiel
In diesem Artikel wird der spezifische Code des o...
Einführung in die Verwendung und Deaktivierung von Transparent Huge Pages in Linux
Einführung Da die Anforderungen an die Computerte...