Heim > Artikel > Web-Frontend > So legen Sie den Transparenzverlauf für ein CSS-Hintergrundbild fest

So legen Sie den Transparenzverlauf für ein CSS-Hintergrundbild fest

青灯夜游Original: 2021-04-26 18:27:4616395Durchsuche

In CSS können Sie die Funktionen linear-gradient() und rgba() verwenden, um den Transparenzgradienten des Bildes zu erreichen. Die Syntax lautet „background-image:linear-gradient(to top,rgba(..), rgba (..)),url (..)".

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.

Transparenzgradienten für CSS-Hintergrundbild festlegen

In CSS können Sie die Funktionen linear-gradient() und rgba() verwenden, um den Transparenzgradienten des Bildes zu erreichen

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>图片透明度渐变实例演示</title>
		<style>
			.div1 {
				box-sizing: border-box;
				width: 400px;
				height: 240px;
				font-size: 22px;
				padding-top: 100px;
				overflow: hidden;
				background: no-repeat center top / 100% 100%;
				background-image: url(img/3.jpg)
			}
			.div2 {
				box-sizing: border-box;
				width: 400px;
				height: 240px;
				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(img/3.jpg)
			}
			
			
		</style>
	</head>

	<body>
		<p>原图：</p>
		<div class="div1"></div>
		<p>透明度渐变：</p>
		<div class="div2"></div>
	</body>

</html>

Rendering:

So legen Sie den Transparenzverlauf für ein CSS-Hintergrundbild fest

( Lernvideo-Sharing: CSS-Video-Tutorial)

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

direction Verwenden Sie den Winkelwert, um die Richtung (oder den Winkel) des Farbverlaufs anzugeben.
color-stop1, color-stop2,... Wird verwendet, um die Start- und Endfarben des Farbverlaufs anzugeben.

Verwenden Sie rgba in der Funktion linear-gradient(), um den Transparenzgradienten festzulegen.

RGBA bedeutet (Rot-Grün-Blau-Alpha). Es handelt sich um eine Erweiterung von RGB um den „Alpha“-Kanal, der die Transparenz des Farbwerts festlegt.

Syntax:

rgba(red, green, blue, alpha)

red Definieren Sie den Rotwert, der Wertebereich ist 0 ~ 255, Sie können auch den Prozentsatz 0 % ~ 100 % verwenden.
Grün Definieren Sie den Grünwert. Der Wertebereich liegt zwischen 0 und 255. Sie können auch den Prozentsatz zwischen 0 und 100 % verwenden.
blau Definieren Sie den Blauwert. Der Wertebereich liegt zwischen 0 und 255. Sie können auch den Prozentsatz zwischen 0 und 100 % verwenden.
alpha – Transparenz Definieren Sie Transparenz 0 (völlig transparent) ~ 1 (völlig undurchsichtig)

Weitere Kenntnisse zum Thema Programmierung finden Sie unter: Einführung in die Programmierung! !

Das obige ist der detaillierte Inhalt vonSo legen Sie den Transparenzverlauf für ein CSS-Hintergrundbild fest. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：So legen Sie die Farbe eines Tags in CSS festNächster Artikel：So legen Sie die Farbe eines Tags in CSS fest

In Verbindung stehende Artikel

Mehr sehen