nav li:first-of-type u. nav li:last-of-type

[Rolf B]

Hallo Gustav,

(1) Opacity

Du schreibst:

da ich deinem Vorschlag gefolgt bin, das home-Icon auf das li Element zu verschieben?

WTF? Das Icon war bereits Hintergrund des li Elements. Mein Vorschlag war, es auf das a Element zu verschieben. Dann klappt das auch mit opacity:0.5 auf dem a Element.

Wenn das Icon Hintergrundbild des li Elements ist, hast Du auch ein anderes Problem. Die aria-current=page Angabe ist auf dem a Element, und es gibt keine Möglichkeit im CSS, ein Element basierend auf Eigenschaften seiner Kinder zu stylen. Wenn das Hintergrundbild auf dem a Element liegt, dann geht es.

(2) Stapelei

Du schreibst:

nav a[aria-current=page] {
   background-image: linear-gradient(0, #fff8, #fff8), 
                     url(/img/homeS.png,/img/home.png);
}

dazu ein mehrfaches Nein.

(1) Verwende nur eine der beiden Techniken. Entweder zwei Bilder, oder ein Bild, dass Du mit einer teiltransparenten Weißebene aufhellst. Es ist wenig sinnvoll, eine separate Datei mit einem grauen Häuschen bereitzustellen, und das dann über eine Weißebene aufzuhellen.

(2) Innerhalb einer URL() Funktion kann man nur ein Bild angeben. Wenn Du zwei Bilddateien stapeln willst, dann so: url(bild1.png), url(bild2.png). Das funktioniert natürlich nur dann, wenn bild1.png transparente oder teiltransparente Bereiche hat, oder wenn es kleiner ist als bild2.png. Andernfalls wird bild2 einfach nur überdeckt.

Egal welche Technik Du verwendest, Du brauchst eine "normale" CSS-Regel und eine für aria-current=page, die den Background verändert.

Mit einem zweiten Bild:

#home a {
    background: url(../img/home.png) no-repeat center/auto 72%;
}
#home a[aria-current=page] {
    /* background-image ersetzen reicht */
    background-image: url(../img/homeS.png);
}

Mit einer Weißebene:

#home a {
    background: url(../img/home.png) no-repeat center/auto 72%;
}
#home a[aria-current=page] {
    background: linear-gradient(0, #fff8 0%, #fff8 100%),
                url(../img/home.png) no-repeat center/auto 72%;
}

Beachte auch, wie ich die background-size in der Sammel-Eigenschaft background unterbringen kann: position / size. Der Schrägstrich ist hier relevanter Teil der Syntax.

Und wenn die position center center ist, kann man auch einfach center schreiben.

Rolf