Heim > Artikel > Web-Frontend > Beispielanalyse, wie der Hintergrund eines CSS-Elements transparent eingestellt wird (Grafik und Text)

Beispielanalyse, wie der Hintergrund eines CSS-Elements transparent eingestellt wird (Grafik und Text)

黄舟Original: 2017-07-20 09:57:371537Durchsuche

Um den Hintergrund eines bestimmten Elements transparent zu machen, geht das unter Chrome, Firefox und Opera so:

background-color: rgba(0, 0, 0, 0.4);

Der letzte Parameter 0,4 in RGBA ist die gewünschte Transparenz, im Bereich von 0~ zwischen 1.

Im IE sieht es normalerweise so aus:

background-color: rgb(0, 0, 0);
filter: alpha(opacity=40);

Opazität steht für Transparenz, ihr Wertebereich liegt zwischen 0 und 100

So machen Sie es mit verschiedenen Browsern kompatibel ? Schreiben Sie sie einfach zusammen.

Da ie RGBA nicht unterstützt, wird es ignoriert. Andere Browser ignorieren im Allgemeinen diejenigen, die sie nicht unterstützen.

Hier ist ein Beispiel:

HTML-Code:

<body>
	<p class="non-transparent">
		aaaaa
		</p>
	</body>
	
<p class="transparent">
	<p class="box">
		box
		</p>
	</p>

CSS-Code:

.non-transparent:hover {
	background-color: yellow;
}

.transparent {
	position: absolute;
	top: 0;
	left: 0;
	
	text-align: center;
	
	width: 100%;
	height: 100%;
	
	filter: alpha(opacity=40);
	background-color: rgb(0, 0, 0);
	
	background-color: rgba(0, 0, 0, 0.4);
}

.box {
	background-color: yellow;
	width: 50%;
	height: 50%;
	
	position: relative;
	left: 5%;
	top: 10%;
}

Anzeigeeffekt:

chrome :

Firefox:

Oper:

ie8:

Darüber hinaus kann dies auch in Chrome, Firefox und Opera erfolgen:

Deckkraft: 0,4;

Aber in diesem Fall wird die Transparenz aller Unterelemente auf den gleichen Wert gesetzt und der Effekt ist wie folgt:

Das obige ist der detaillierte Inhalt vonBeispielanalyse, wie der Hintergrund eines CSS-Elements transparent eingestellt wird (Grafik und Text). 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：Wie stelle ich die Transparenz des Hintergrundbilds ein?Nächster Artikel：Wie stelle ich die Transparenz des Hintergrundbilds ein?

In Verbindung stehende Artikel

Mehr sehen