Ist es möglich, die Deckkraft eines Hintergrundbilds einzustellen, ohne die Deckkraft untergeordneter Elemente zu beeinflussen?
Beispiel
Alle Links in der Fußzeile benötigen ein benutzerdefiniertes Aufzählungszeichen (Hintergrundbild) und die Deckkraft des benutzerdefinierten Aufzählungszeichens sollte 50% betragen.
HTML
<div id="footer">
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
</ul>
</div>
CSS
#footer ul li {
background: url(/images/arrow.png) no-repeat 0 50%;
}
Was ich versucht habe
Ich habe versucht, die Deckkraft der Listenelemente auf 50% zu setzen, aber dann beträgt die Deckkraft des Linktextes auch 50% - und es scheint keine Möglichkeit zu geben, die Deckkraft untergeordneter Elemente zurückzusetzen:
#footer ul li {
background: url(/images/arrow.png) no-repeat 0 50%;
/* will also set the opacity of the link text */
opacity: 0.5;
}
Ich habe auch versucht, rgba zu verwenden, aber das hat keine Auswirkungen auf das Hintergrundbild:
#footer ul li {
/* rgba doesn't apply to the background image */
background: rgba(255, 255, 255, 0.5) url(/images/arrow.png) no-repeat 0 50%;
}
Antworten:
Sie können CSS
linear-gradient()
mit verwendenrgba()
.quelle
Nehmen Sie Ihr Bild in einen Bildeditor, verringern Sie die Deckkraft, speichern Sie es als PNG und verwenden Sie es stattdessen.
quelle
Dies funktioniert mit jedem Browser
Wenn Sie nicht möchten, dass Transparenz den gesamten Container und seine untergeordneten Container beeinflusst, überprüfen Sie diese Problemumgehung. Sie müssen ein absolut positioniertes Kind mit einem relativ positionierten Elternteil haben.
Überprüfen Sie die Demo unter http://www.impressivewebs.com/css-opacity-that-doesnt-affect-child-elements/
quelle
position:relative;
und das img aufposition:absolute;
setze, kann ich die geerbte Deckkraft auf dem img NICHT überschreiben, und ich kann keine absolute Positionierung für das <li> selbst verwenden (das ist ein Chaos ;-). In Javascript habe ich versuchtimgs[i].style.opacity = '1';
, aber das funktioniert auch nicht, um die geerbte Deckkraft zu überschreiben. Wenn ich das richtig verstehe, kann ich rgba auch nicht verwenden, da ich die Bilder selbst beeinflussen muss, nicht nur eine Hintergrundfarbe. Hat jemand eine Empfehlung für mich?Wenn Sie das Bild als Aufzählungszeichen verwenden, können Sie das Pseudoelement: before berücksichtigen.
quelle
*zoom: expression( … );
(siehe : after und: before css Pseudo Elements Hack für IE 7 ), aber IE7 wird endlich passé.Sie können das Bild in div: after oder div: before einfügen und die Deckkraft für dieses "virtuelle div" festlegen.
hier zu finden http://css-tricks.com/snippets/css/transparent-background-images/
quelle
Hack mit einer Deckkraft von 0,99 (weniger als 1) erstellt einen Z-Index-Kontext, sodass Sie sich keine Gedanken über globale Z-Index-Werte machen müssen. (Versuchen Sie, es zu entfernen und sehen Sie, was in der nächsten Demo passiert, in der der übergeordnete Wrapper einen positiven Z-Index hat.)
Wenn Ihr Element bereits einen Z-Index hat, benötigen Sie diesen Hack nicht.
Demo dieser Technik .
quelle
Leider gibt es zum Zeitpunkt des Schreibens dieser Antwort keinen direkten Weg , dies zu tun. Du brauchst:
quelle
Eine weitere Option ist der CSS-Tricks- Ansatz, bei dem ein Pseudoelement in der exakten Größe des ursprünglichen Elements direkt dahinter eingefügt wird, um den von uns gesuchten undurchsichtigen Hintergrundeffekt vorzutäuschen. Manchmal müssen Sie eine Höhe für das Pseudoelement festlegen.
quelle
Die Eigenschaft "filter" benötigt eine Ganzzahl für den Prozentsatz der Deckkraft anstelle von double, um für IE7 / 8 zu arbeiten.
PS: Ich poste dies als Antwort, da SO mindestens 6 geänderte Zeichen für eine Bearbeitung benötigt.
quelle
Um die Dinge wirklich zu optimieren, empfehle ich, die entsprechende Auswahl in Browser-Targeting-Wrappern zu platzieren. Dies war das einzige, was für mich funktioniert hat, als ich IE7 und IE8 nicht dazu bringen konnte, "gut mit anderen zu spielen" (da ich derzeit für ein Softwareunternehmen arbeite, das sie weiterhin unterstützt).
Ich kann Redundanzen im obigen Code haben - wenn jemand es weiter bereinigen möchte, fühlen Sie sich frei!
quelle
-moz-border-radius
in Firefox 13 eingestellt und suchtborder-radius
jetzt nur nach der Standardeigenschaft ). IE7 und IE8 sind eine andere Geschichte, aber das ist nur IE :-p-khtml-opacity
weil es die Medienabfrage nicht versteht und sie unbrauchbar macht 2) IE ist stabiler als Sie denken; Es wird nicht "explodieren", nur weil Sie einer Regel, die für den IE gilt, Nicht-IE-Präfixe hinzufügen. Das Problem muss zu dem Zeitpunkt, als Sie damit konfrontiert wurden, von einem anderen Ort gekommen sein.Wenn Sie die Deckkraft nur auf das Aufzählungszeichen einstellen müssen, warum stellen Sie den Alphakanal nicht direkt in das Bild ein? Übrigens glaube ich nicht, dass es eine Möglichkeit gibt, die Deckkraft über CSS auf ein Hintergrundbild zu setzen, ohne die Deckkraft des gesamten Elements (und seiner untergeordneten Elemente) zu ändern.
quelle
Nur um das oben Gesagte zu ergänzen. Sie können den Alphakanal mit den neuen Farbattributen verwenden, z. rgba (0,0,0,0) ok, das ist also schwarz, aber ohne Deckkraft, so dass es als Elternteil keine Auswirkungen auf das Kind hat. Dies funktioniert nur auf Chrome, FF, Safari und ... Ich denke, O.
Konvertieren Sie Ihre Hex-Farben in RGBA
quelle
background-image
vom OP angeforderten.Ich habe ein ziemlich gutes und einfaches Tutorial zu diesem Thema gefunden. Ich denke, es funktioniert großartig (und obwohl es IE unterstützt, fordere ich meine Kunden einfach auf, andere Browser zu verwenden):
CSS-Hintergrundtransparenz ohne Auswirkungen auf untergeordnete Elemente durch RGBa und Filter
Von dort aus können Sie Verlaufsunterstützung usw. hinzufügen.
quelle
Sie können diesen Code ausprobieren. Ich denke es wird funktionieren. Sie können die Demo besuchen
quelle