Legen Sie die Deckkraft des Hintergrundbilds fest, ohne die untergeordneten Elemente zu beeinflussen

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

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

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>

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 sich Transparenz auf den gesamten Container und dessen untergeordnete Objekte auswirkt, ü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: vor betrachten.

#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 gefunden 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 .99 (weniger als 1) erstellt einen Z-Index-Kontext, sodass Sie sich nicht um globale Z-Index-Werte sorgen müssen. (Versuchen Sie es zu entfernen und sehen Sie, was in der nächsten Demo passiert, wenn der übergeordnete Wrapper einen positiven Z-Index hat.)
Wenn Ihr Element bereits einen Z-Index hat, brauchen Sie diesen Hack nicht.

Demo dieser Technik .

Zum Zeitpunkt des Schreibens dieser Antwort gibt es leider keinen direkten Weg, dies zu tun. Du musst:

1. verwenden Sie ein halbtransparentes Bild für den Hintergrund (viel einfacher).
2. fügen Sie ein zusätzliches Element (wie div) neben Kindern hinzu, die Sie undurchsichtig machen möchten, fügen Sie Hintergrund hinzu und positionieren Sie es hinter den genannten Kindern halbtransparent.

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

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

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

Um die Dinge wirklich fein abzustimmen, empfehle ich, die entsprechende Auswahl in Browser-Targeting-Wrappern zu platzieren. Dies war das einzige, was für mich funktionierte, als ich IE7 und IE8 nicht dazu bringen konnte, "nett 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 habe möglicherweise Entlassungen in dem obigen Code - wenn jemand es weiter bereinigen möchte, fühlen Sie sich frei!

Um einfach zu dem oben genannten hinzuzufügen, können Sie den Alphakanal mit den neuen Farbattributen verwenden, z. rgba (0,0,0,0) ok, dies ist schwarz, aber mit einer Opazität von null, so dass es sich als Elternteil nicht auf das Kind auswirkt. Das funktioniert nur bei Chrome, FF, Safari und .... Ich dünne O.

konvertieren Sie Ihre Hex-Farben in RGBA

Ich habe ein ziemlich gutes und einfaches Tutorial zu diesem Problem gefunden. Ich denke, es funktioniert großartig (und obwohl es IE unterstützt, sage ich meinen Clients nur, dass sie andere Browser verwenden sollen):

CSS-Hintergrundtransparenz ohne Auswirkungen auf untergeordnete Elemente durch RGBa und Filter

Von dort aus können Sie Gradientenunterstützung hinzufügen.

Wenn Sie die Deckkraft nur auf das Aufzählungszeichen setzen müssen, warum setzen Sie den Alphakanal nicht direkt in das Bild ein? Ich glaube übrigens nicht, dass es eine Möglichkeit gibt, die Deckkraft mittels css auf ein Hintergrundbild festzulegen, ohne die Deckkraft des gesamten Elements (und seiner untergeordneten Elemente) zu ändern.

#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 gearbeitet. Sie können die Demo besuchen

Eine weitere Option ist die Verwendung von CSS Tricks des Einfügens eines Pseudoelements mit der genauen Größe des ursprünglichen Elements direkt dahinter, um den von Ihnen gesuchten undurchsichtigen Hintergrundeffekt zu fälschen. 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;   
}