Stellen Sie die Deckkraft des Hintergrundbilds ein, ohne die untergeordneten Elemente zu beeinflussen

214

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%;
}
jmohr
quelle

Antworten:

119

Sie können CSS linear-gradient()mit verwenden rgba().

div {
  width: 300px;
  height: 200px;
  background: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,.5)), url("https://i.imgur.com/xnh5x47.jpg");
}
span {
  background: black;
  color: white;
}
<div><span>Hello world.</span></div>

Aufkleber
quelle
Dies ist die beste Lösung!
Dzenis H.
93

Nehmen Sie Ihr Bild in einen Bildeditor, verringern Sie die Deckkraft, speichern Sie es als PNG und verwenden Sie es stattdessen.

2ToneKenobi
quelle
8
Hmm ... ich gerade downvoted, aber Blick auf diese akzeptierte Antwort: stackoverflow.com/a/6502295/131809 upvoted 10 - mal, und so ziemlich identisch.
Alex
9
Dies ist eine gute Option, keine Ahnung, warum so viele Abstimmungen. Wenn ich das zweimal positiv bewerten könnte, würde ich es tun. Ein untergeordnetes Element eines teilweise undurchsichtigen übergeordneten Elements wird teilweise undurchsichtig sein und sollte es auch sein. Alle "Problemumgehungen" sind Fehler, die eventuell behoben werden sollten.
RobW
6
@mystrdat Sie laden das Bild bereits herunter, dies ist keine zusätzliche Anfrage.
Brad
2
@mystrdat Aber er lädt bereits das Pfeilbild herunter. Sie haben keine Nicht-Image-Lösung bereitgestellt, das war also mein Punkt. Er lädt bereits das Pfeilbild herunter, es könnte genauso gut nach Bedarf kommen, was keine zusätzliche Anfrage wäre. Ich verstehe nicht, woher du kommst.
Brad
1
@brad Ich entschuldige mich, es stellt sich heraus, dass ich die Frage jetzt falsch gelesen habe, da ich sie erneut überprüft habe.
Mystrdat
41

Dies funktioniert mit jedem Browser

div {
 -khtml-opacity:.50; 
 -moz-opacity:.50; 
 -ms-filter:"alpha(opacity=50)";
  filter:alpha(opacity=50);
  filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.5);
  opacity:.50; 
}

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/

Hussein
quelle
Ich denke, Sie müssen die "Anführungszeichen im obigen Code in" ändern, damit es funktioniert, wenn es direkt kopiert wird.
nsantorello
6
Ist diese Antwort immer noch die beste Lösung für das Problem: "Wie kann ein untergeordnetes Element den CSS-Opazitätswert des übergeordneten Elements nicht erben?" Ich brauche das Kind, um wirklich ein Kind zu sein ... und im Dokumentenfluss ... und möchte auch kein Javascript / Flash dafür einbringen; bevorzugen Sie reines CSS.
Govinda
Ich habe 50% undurchsichtige Eltern, die untergeordnete Bilder enthalten, die ich zu 100% undurchsichtig haben möchte. Wenn ich das <li> auf position:relative;und das img auf position: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 versucht imgs[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?
Govinda
26
Diese ganze Antwort macht keinen Sinn. Der angegebene Code ist nicht nur genau das, was der Fragesteller nicht tun möchte, weil er nicht funktioniert , sondern stimmt auch nicht mit der Beschreibung oder dem Link überein. Es fällt mir sehr schwer zu verstehen, warum so viele Leute es positiv bewertet haben.
BoltClock
Wenn die Frage lautete: "Wie wird eine 50% ige Transparenz für ein Element festgelegt?", Wäre dies eine gute Antwort.
lharby
29

Wenn Sie das Bild als Aufzählungszeichen verwenden, können Sie das Pseudoelement: before berücksichtigen.

#footer ul li {
}

#footer ul li:before {
    content: url(/images/arrow.png);
    filter:alpha(opacity=50);
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.5);
    opacity:.50;
}
Herr Griever
quelle
3
Filter ist nur eine IE-Lösung
Hussein
1
Ich denke, das ist wahrscheinlich die beste Lösung. Es ist eine reine CSS-Lösung. Es ist auch möglich, die IE7-Unterstützung mit zu hacken *zoom: expression( … );(siehe : after und: before css Pseudo Elements Hack für IE 7 ), aber IE7 wird endlich passé.
Thirdender
9
#footer ul li {
  position: relative;
  opacity: 0.99;
}

#footer ul li::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: -1;
  background: url(/images/arrow.png) no-repeat 0 50%;
  opacity: 0.5;
}

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 .

Benutzer
quelle
Wissen Sie, warum wir für die Deckkraft einen Wert von weniger als 1 festlegen müssen? Ist es eine browserübergreifende Lösung?
zVictor
1
@zVictor ja, das ist w3c-standardisiertes Verhalten. Siehe Grundlegendes zum CSS-Z-Index: Der Stapelkontext .
Benutzer
4

Leider gibt es zum Zeitpunkt des Schreibens dieser Antwort keinen direkten Weg , dies zu tun. Du brauchst:

  1. Verwenden Sie ein halbtransparentes Bild als Hintergrund (viel einfacher).
  2. Fügen Sie ein zusätzliches Element (wie div) neben den Kindern hinzu, für die Sie die Undurchsichtigkeit wünschen, fügen Sie Hintergrund hinzu und positionieren Sie es, nachdem Sie es halbtransparent gemacht haben, hinter den genannten Kindern.
Reyraa
quelle
4

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.

div {
  width: 200px;
  height: 200px;
  display: block;
  position: relative;
}

div::after {
  content: "";
  background: url(image.jpg);
  opacity: 0.5;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1;   
}
kaleazy
quelle
3

Die Eigenschaft "filter" benötigt eine Ganzzahl für den Prozentsatz der Deckkraft anstelle von double, um für IE7 / 8 zu arbeiten.

filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);

PS: Ich poste dies als Antwort, da SO mindestens 6 geänderte Zeichen für eine Bearbeitung benötigt.

lyubeto
quelle
2

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).

/* color or background image for all browsers, of course */            
#myBackground {
    background-color:#666; 
}
/* target chrome & safari without disrupting IE7-8 */
@media screen and (-webkit-min-device-pixel-ratio:0) {
    #myBackground {
        -khtml-opacity:.50; 
        opacity:.50;
    }
}
/* target firefox without disrupting IE */
@-moz-document url-prefix() {
    #myBackground {
        -moz-opacity:.50;
        opacity:0.5;
    }
}
/* and IE last so it doesn't blow up */
#myBackground {
    opacity:.50;
    filter:alpha(opacity=50);
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.5);
}

Ich kann Redundanzen im obigen Code haben - wenn jemand es weiter bereinigen möchte, fühlen Sie sich frei!

Code-Sushi
quelle
3
Es ist nicht erforderlich, jeden Browser einzeln auszurichten. Verwenden Sie einfach die Browserpräfixe in einem einzelnen Auswahlblock. Mit den Browserpräfixen verwendet der Browser nur die entsprechende CSS-Eigenschaft. Im Laufe der Zeit und wenn die Syntax für diese Eigenschaft standardisiert wird, werden Browser-Anbieter die Unterstützung für die Präfixe einstellen und die CSS-Eigenschaft ohne Präfix verwenden (z. B. hat Firefox die Unterstützung für -moz-border-radiusin Firefox 13 eingestellt und sucht border-radiusjetzt nur nach der Standardeigenschaft ). IE7 und IE8 sind eine andere Geschichte, aber das ist nur IE :-p
Thirdender
Ich würde gerne wissen, wer dies abgelehnt hat und warum, bitte. Die Abstimmung ist ohne informatives Feedback nutzlos. Ich möchte meine Antworten verbessern können. Wenn es nur war, weil die Informationen veraltet waren, überprüfen Sie bitte das Datum. :) Vielen Dank.
Code-Sushi
@ code-sushi: Wenn die Abwertung ungefähr zur gleichen Zeit wie Ihr Kommentar erfolgte, denken Sie daran, dass sie möglicherweise von einer anderen Person stammt, die dem Kommentar des Drittanbieters zustimmt (beachten Sie die positiven Stimmen auf dem Kommentar selbst). Ich habe nicht über Ihre Antwort abgestimmt, aber ich muss zustimmen - ich möchte hinzufügen, dass 1) KHTML das nie sehen wird, -khtml-opacityweil 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.
BoltClock
Meine ursprüngliche Antwort war von vor fast 2 Jahren und die Abstimmung fand vor kurzem statt, wie in diesem Jahr. Ich war nur neugierig. Die IE-Kommentare betrafen 7, als diese noch Unterstützung benötigten. Ich bin mir ziemlich sicher, dass es jetzt in den meisten Fällen in Ordnung ist, IE 7 heutzutage zu ignorieren. Vielen Dank für Ihr Feedback.
Code-Sushi
1

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.

Minkiele
quelle
1

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

frontsideup
quelle
4
Dies funktioniert nicht mit den background-imagevom OP angeforderten.
Torsten Walter
1

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.

Francisco
quelle
Nun, es wird nicht direkt funktionieren. Sie müssten ein div als Elternelement mit Hintergrundfarbe einfügen: (255,255,255,0,5) zum Beispiel
Francisco
0
#footer ul li
     {
       position:relative;
       list-style:none;
     }
    #footer ul li:before
     {
       background-image: url(imagesFolder/bg_demo.png);
       background-repeat:no-repeat;
       content: "";
       top: 5px;
       left: -10px;
       bottom: 0;
       right: 0;
       position: absolute;
       z-index: -1;
       opacity: 0.5;
    }

Sie können diesen Code ausprobieren. Ich denke es wird funktionieren. Sie können die Demo besuchen

Jakir Hossain
quelle