Ist es möglich, nur mit CSS den "Hintergrund" eines Elements halbtransparent zu machen, aber den Inhalt (Text und Bilder) des Elements undurchsichtig zu machen?
Ich möchte dies erreichen, ohne den Text und den Hintergrund als zwei separate Elemente zu haben.
Beim Versuch:
<p>
<span>Hello world</span>
</p>
p {
position: absolute;
background-color: green;
filter: alpha(opacity=60);
opacity: 0.6;
}
span {
color: white;
filter: alpha(opacity=100);
opacity: 1;
}
Es sieht so aus, als ob untergeordnete Elemente der Deckkraft ihrer übergeordneten Elemente unterliegen, so dass "Deckkraft:1" relativ zu "Deckkraft:0,6" des übergeordneten Elements ist.
Die einfachste Methode wäre die Verwendung eines halbtransparenten Hintergrunds als PNG-Bild.
Sie können JavaScript verwenden, damit es im Internet Explorer 6 funktioniert, falls nötig.
Ich verwende die Methode, die in Transparente PNGs in Internet Explorer 6 beschrieben ist.
Ansonsten können Sie es mit zwei nebeneinander liegenden Geschwisterelementen vortäuschen - machen Sie eines halbtransparent, und positionieren Sie das andere absolut darüber.
Das Problem ist, dass der Text in Ihrem Beispiel tatsächlich volle Deckkraft hat. Innerhalb des "p"-Tags hat er volle Deckkraft, aber der "p"-Tag ist nur halbtransparent.
Sie könnten ein halbtransparentes PNG-Hintergrundbild hinzufügen, anstatt es in CSS zu realisieren, oder Text und div in zwei Elemente aufteilen und den Text über die Box verschieben (z. B. negativer Rand).
Andernfalls wird es nicht möglich sein.
Wie Chris schon sagte: Wenn Sie eine PNG-Datei mit Transparenz verwenden, müssen Sie einen JavaScript-Workaround verwenden, damit es im lästigen Internet Explorer funktioniert...
Opazität des Hintergrunds, aber nicht des Textes hat einige Ideen. Verwenden Sie entweder ein halbtransparentes Bild, oder überlagern Sie ein zusätzliches Element.