Kann ich die Eigenschaft "opacity" nur der Eigenschaft "background" eines "div" zuweisen und nicht dem Text darin?
Ich habe es versucht:
background: #CCC;
opacity: 0.6;
aber das ändert die Deckkraft nicht.
Es hört sich so an, als ob Sie einen transparenten Hintergrund verwenden möchten. In diesem Fall könnten Sie versuchen, die Funktion rgba()
zu verwenden:
rgba(R, G, B, A)
R (Rot), G (Grün) und B (Blau) können entweder
<Ganzzahl>
oder<Prozentzahl>
sein, wobei die Zahl 255 100% entspricht. A (Alpha) kann einezwischen 0 und 1 oder ein sein, wobei die Zahl 1 100% (volle Deckkraft) entspricht.
RGBa Beispiel
rgba(51, 170, 51, .1) / 10% opakes Grün / rgba(51, 170, 51, .4) / 40% deckendes Grün / rgba(51, 170, 51, .7) / 70% gedecktes Grün / rgba(51, 170, 51, 1) / vollständig deckendes Grün /
Ein kleines [Beispiel][2], das zeigt, wie rgba
verwendet werden kann.
Ab 2018 unterstützt praktisch jeder Browser die rgba
-Syntax.
Am einfachsten geht das mit 2 Divs, 1 mit dem Hintergrund und 1 mit dem Text:
#container {
position: relative;
width: 300px;
height: 200px;
}
#block {
background: #CCC;
filter: alpha(opacity=60);
/* IE */
-moz-opacity: 0.6;
/* Mozilla */
opacity: 0.6;
/* CSS3 */
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
#text {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
<div id="container">
<div id="block"></div>
<div id="text">Test</div>
</div>
Das können Sie nicht. Sie müssen ein separates Div haben, das nur dieser Hintergrund ist, so dass Sie die Deckkraft nur auf diesen anwenden können.
Ich habe versucht, dies zu tun vor kurzem, und da ich bereits mit jQuery, fand ich die folgenden zu sein, die am wenigsten Ärger:
Ich bin mir sicher, dass es eine Art CSS-Ninja-Weg gibt, um all das nur mit Floats oder so zu machen, aber ich hatte nicht die Geduld, es herauszufinden.