suchen

Heim  >  Fragen und Antworten  >  Hauptteil

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

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


P粉354602955P粉354602955484 Tage vor717

Antworte allen(1)Ich werde antworten

  • P粉574268989

    P粉5742689892023-10-11 13:07:40

    您可以将 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>

    Antwort
    0
  • StornierenAntwort