Heim > Artikel > Web-Frontend > CSS macht den Hintergrund transparent und den Text undurchsichtig (kompatibel mit allen Browsern)

CSS macht den Hintergrund transparent und den Text undurchsichtig (kompatibel mit allen Browsern)

巴扎黑Original: 2017-04-05 16:27:511606Durchsuche

In neueren Browsern wie FF/Chrome können Sie den RGBA des CSS-Attributs Hintergrundfarbe verwenden, um auf einfache Weise Hintergrundtransparenz zu erreichen, während der Text undurchsichtig bleibt. IE6/7/8-Browser unterstützen RGBA nicht und können dies nur mit dem exklusiven Filter filter:Alpha von IE erreichen. Diese Schreibweise macht den Text jedoch transparent, sodass er nur innerhalb der untergeordneten Knoten des transparenten verwendet werden kann Container (außer Textknoten). Legen Sie position:relative fest, um zu vermeiden, dass der Transparenzfilter seines übergeordneten Elements geerbt wird:

DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional .dtd">
<html xmlns=" http://www.w3.org/1999/xhtml">
<Kopf>
<meta http-equiv="Content-Type"content="text/html; charset=utf-8" />
<Titel>Web开发者网络 - www.admin10000.comTitel>
<Stil Typ=" text/css">
.warp{Hintergrund: #eee url(back.jpg) no-repeat left top; width:440px;Höhe:400px; Rahmen:1px durchgehend #ccc ;}
.content { width:180px; Höhe:260px; Rand:0px auto; padding:30px 30px;Hintergrund:rgba(255, 255, 255, 0.6)!important;
Filter:Alpha(Deckkraft=60);Hintergrund: #fff; /* Verwenden Sie den exklusiven IE-Filter, um IE-Hintergrundtransparenz zu erreichen*/ }
.content p{Position:relativ;} /*IE-Textopazität realisieren*/
Stil>
Kopf>
<Körper>
<p Klasse="warp">
<p Klasse="content"><p >Admin10000.com ist eine unverzichtbare Website für WEB-Entwickler zum Lernen und Kommunizieren. Admin10000.com ist eine unverzichtbare Website für WEB-Entwickler zum Lernen und Kommunizieren. Admin10000.com ist eine unverzichtbare Website für WEB-Entwickler zum Lernen und Kommunizieren. Admin10000.com ist eine unverzichtbare Website für WEB-Entwickler zum Lernen und Kommunizieren. Admin10000.com ist eine unverzichtbare Website für WEB-Entwickler zum Lernen und Kommunizieren. Admin10000.com ist eine unverzichtbare Website für WEB-Entwickler zum Lernen und Kommunizieren. p>p>
p>
Körper >
html>

Der obige Code wurde in IE6.0+/FF3.0+/Opera10+/Chrome/Safari

getestet und bestanden

Das obige ist der detaillierte Inhalt vonCSS macht den Hintergrund transparent und den Text undurchsichtig (kompatibel mit allen Browsern). 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：Über CSS-Mehrkategorieselektoren unter IE6Nächster Artikel：Über CSS-Mehrkategorieselektoren unter IE6

In Verbindung stehende Artikel

Mehr sehen