Heim > Web-Frontend > CSS-Tutorial > Wie stelle ich die Deckkraft für Div-Hintergründe ein, ohne die enthaltenen Elemente in IE 8 zu beeinträchtigen?

Wie stelle ich die Deckkraft für Div-Hintergründe ein, ohne die enthaltenen Elemente in IE 8 zu beeinträchtigen?

Linda Hamilton
Freigeben: 2024-11-09 04:13:02
Original
855 Leute haben es durchsucht

How do I set opacity for div backgrounds without affecting contained elements in IE 8?

So legen Sie die Deckkraft für Div-Hintergründe fest, ohne die enthaltenen Elemente in IE 8 zu ändern

Beim Versuch, Deckkraft auf den Hintergrund eines Div-Elements anzuwenden Ohne die darin enthaltenen Elemente im IE 8 zu beeinträchtigen, können die folgenden Methoden häufig verwendet werden fail:

  • Verwendung der CSS-Eigenschaft opacity: Dies wirkt sich sowohl auf das div als auch auf seinen Inhalt aus.
  • Verwendung von PNG-Bildern mit opacity: Dies ist keine dynamische Lösung.

Lösung

Verwenden Sie stattdessen die CSS-Funktion rgba() um die Hintergrundfarbe anzugeben, einschließlich eines Alphakanals für die Deckkraft:

.myelement {
    background: rgba(200, 54, 54, 0.5);
}
Nach dem Login kopieren

Für IE8-Kompatibilität

Um ältere Versionen von IE zu unterstützen, sollten Sie CSS3Pie verwenden, das hinzufügt RGBA-Unterstützung für IE. Geändertes Stylesheet:

.myelement {
    background: rgba(200, 54, 54, 0.5);
    -pie-background: rgba(200, 54, 54, 0.5);
    behavior: url(PIE.htc);
}
Nach dem Login kopieren

Alternative Methode für IE-Filter

IE-Filter können auch mit dem Schlüsselwort „gradient“ verwendet werden:

.myelement {
    filter: gradient(startColorstr='#990000', endColorstr='#990000', GradientType=0);
    opacity: 0.5;
}
Nach dem Login kopieren

Hinweis dass der Deckkraftwert nicht über die Filtereigenschaft direkt im IE angegeben werden kann.

Das obige ist der detaillierte Inhalt vonWie stelle ich die Deckkraft für Div-Hintergründe ein, ohne die enthaltenen Elemente in IE 8 zu beeinträchtigen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
Erklärung dieser Website
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
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage