Erstellen Sie einen Hintergrundbildverlauf mit CSS
- Erstellen Sie einen Hintergrundbildverlauf mit CSS
- Keynotes, um das Hintergrundbild lesbar zu machen
- Abschluss
Ein Hintergrundbildverlauf ist ein allmählicher Übergang von einer Farbe zu einer anderen. Hintergrundbildverläufe können mit einer Vielzahl von Farben erstellt werden, aber sie sind normalerweise am effektivsten, wenn sie eine begrenzte Farbpalette verwenden.
In diesem Artikel erfahren Sie, wie Sie mit CSS einen Hintergrundbildverlauf erstellen.
Erstellen Sie einen Hintergrundbildverlauf mit CSS
Hintergrundbildverläufe können mit einer Vielzahl von Farbpalettentypen erstellt werden, einschließlich monochromatischer, komplementärer und analoger Farben. Sie können auch einen Farbverlauf mit zwei beliebigen Farben erstellen.
Im folgenden Beispiel haben wir einen Hell-Dunkel-Verlauf, der oben auf der Seite beginnt. Dies schafft eine subtile, effektive Möglichkeit, Ihrer Website ein gewisses visuelles Interesse zu verleihen.
Code:
<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
height: 200px;
background-color: red; /* For browsers that do not support gradients */
background-image: linear-gradient(red, yellow);
}
</style>
</head>
<body>
<h1>Linear Gradient - Top to Bottom</h1>
<p>This linear gradient starts red at the top, transitioning to yellow at the bottom:</p>
<div id="grad1"></div>
</body>
</html>
Keynotes, um das Hintergrundbild lesbar zu machen
Sie können ein paar Dinge tun, um ein besser lesbares Hintergrundbild zu erstellen.
- Verwenden Sie eine helle oder neutrale Hintergrundfarbe. Dadurch wird der Text auf dem Bild besser sichtbar.
- Verwenden Sie eine dunkle Textfarbe auf hellem Hintergrund oder eine helle Textfarbe auf dunklem Hintergrund. Dadurch wird der Text leichter lesbar.
- Erhöhen Sie den Kontrast zwischen Text und Hintergrund. Dadurch hebt sich der Text besser ab und ist leichter lesbar.
Abschluss
Es gibt verschiedene Möglichkeiten, wie Sie Hintergrundbildverläufe verwenden können. Eine Möglichkeit besteht darin, Ihrem Hintergrundbild eine Verlaufsüberlagerung hinzuzufügen.
Eine andere Möglichkeit, Hintergrundbildverläufe zu verwenden, besteht darin, eine Verlaufsmaske zu erstellen. Diese fortgeschrittenere Methode kann sehr effektiv sein, wenn sie richtig durchgeführt wird.
Zeeshan is a detail oriented software engineer that helps companies and individuals make their lives and easier with software solutions.
LinkedIn