So legen Sie den Transparenzgradienten in CSS fest-CSS-Tutorial-php.cn

So legen Sie den Transparenzgradienten in CSS fest

藏色散人

Freigeben： 2022-12-30 11:13:33

Original

17731 Leute haben es durchsucht

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.

So legen Sie den Transparenzgradienten in CSS fest

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>

Nach dem Login kopieren

Rendering:

So legen Sie den Transparenzgradienten in CSS fest

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, ...);

Nach dem Login kopieren

RGBA ()

RGBA bedeutet (Rot-Grün-Blau-Alpha). Es wird auf RGB um den „Alpha“-Kanal erweitert, der die Transparenz von Farbwerten festlegt.