Heim >Web-Frontend >CSS-Tutorial >So legen Sie den Transparenzgradienten in CSS fest
So legen Sie den Transparenzgradienten in CSS fest
- 藏色散人Original
- 2021-02-03 09:24:5317730Durchsuche
So legen Sie den Transparenzgradienten in CSS fest: Erstellen Sie zunächst eine HTML-Beispieldatei. Fügen Sie dann Bilder in den Textkörper ein und verwenden Sie schließlich die Funktion „linear-gradient()“, um den Transparenzgradienten festzulegen.
Die Betriebsumgebung dieses Artikels: Windows7-System, HTML5- und CSS3-Version, Dell G3-Computer.
Transparenzgradienten in CSS festlegen
In CSS können Sie die Funktion linear-gradient() zusammen mit rgba() verwenden, um den Transparenzgradienten festzulegen. Die Funktion linear-gradient() wird zum Festlegen des Farbverlaufs und die Einstellung rgba() zum Festlegen der Farbtransparenz verwendet.
Beispiel:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图片透明度渐变实例演示</title>
<style>
.div1 {
box-sizing: border-box;
width: 400px;
height: 320px;
font-size: 22px;
padding-top: 100px;
overflow: hidden;
background: no-repeat center top / 100% 100%;
background-image: linear-gradient(to top, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)), url(1.jpg)
}
.div2 {
box-sizing: border-box;
width: 400px;
height: 320px;
font-size: 22px;
padding-top: 100px;
overflow: hidden;
background: no-repeat center top / 100% 100%;
background-image: url(1.jpg)
}
</style>
<div class="div1">设置透明度渐变效果的图片</div>
<div class="div2">正常图片</div>
</body>
</html>Rendering:
Beschreibung: Die Funktion
linear-gradient() wird verwendet, um ein „Bild“ mit linearem Farbverlauf zu erstellen.
Um einen linearen Farbverlauf zu erstellen, müssen Sie einen Startpunkt und eine Richtung (angegeben als Winkel) des Farbverlaufseffekts festlegen. Sie müssen auch die Endfarbe definieren. Die Stoppfarbe ist der sanfte Übergang, den Gecko erzeugen soll. Sie müssen mindestens zwei angeben. Sie können jedoch auch weitere Farben angeben, um komplexere Verlaufseffekte zu erzielen.
css-Syntax:
background: linear-gradient(direction, color-stop1, color-stop2, ...);
RGBA ()
RGBA bedeutet (Rot-Grün-Blau-Alpha). Es wird auf RGB um den „Alpha“-Kanal erweitert, der die Transparenz von Farbwerten festlegt.
Empfohlen: „CSS-Video-Tutorial“
Das obige ist der detaillierte Inhalt vonSo legen Sie den Transparenzgradienten in CSS fest. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!