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

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>

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

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/

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;
}

Sie können das Bild in div: after oder div: before einfügen und die Deckkraft für dieses "virtuelle div" festlegen.

div:after {
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/owl1.jpg);
  opacity: 0.25;
}

hier zu finden http://css-tricks.com/snippets/css/transparent-background-images/

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

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.

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;   
}

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.

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!

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.

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

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.

#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