Ändern Sie die Deckkraft des Hintergrundbilds und bewahren Sie gleichzeitig die Sichtbarkeit untergeordneter Elemente

Question

Ist es möglich, die Deckkraft eines Hintergrundbilds festzulegen, ohne die Deckkraft untergeordneter Elemente zu beeinflussen?

Beispiel

Alle Links in der Fußzeile erfordern benutzerdefinierte Aufzählungszeichen (Hintergrundbild) und die Deckkraft der benutzerdefinierten Aufzählungszeichen 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 des Listenelements auf 50 % einzustellen, aber die Deckkraft des Linktexts beträgt ebenfalls 50 % – und es scheint keine Möglichkeit zu geben, die Deckkraft der untergeordneten 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 es auch mit RGBA versucht, aber das hatte keine Auswirkung 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%;
}

Answer 1

您可以将 CSS linear-gradient() 与 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>