webentwicklung-frage-antwort-db.com.de

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

Ist es möglich, die Deckkraft eines Hintergrundbildes festzulegen, ohne die Deckkraft von untergeordneten Elementen 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% einzustellen, aber dann ist auch die Deckkraft des Linktextes 50% - und es scheint keine Möglichkeit zu geben, die Deckkraft von untergeordneten Elementen 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 keinen Einfluss 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%;
}
192
jmohr

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

91
2ToneKenobi

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>

55
Stickers

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/

43
Hussein

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;
}
28
Mr Griever

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/

13
Zied Hamdi
#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 .

8
user

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.
4
Reyraa

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.

3
lyubeto

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!

2
code-sushi

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

1
Undefined

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.

1
Francisco

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.

1
Minkiele
#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

0
Jakir Hossain

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