Többszörös háttérképek a CSS-ben

A CSS lehetővé teszi, hogy egyetlen elemhez több háttérréteget adjunk meg. Ezek lehetnek képek, színek vagy akár gradiensek is, amelyeket vesszővel elválasztva sorolunk fel. A sorrend meghatározza, melyik réteg van felül és melyik alul.

Alapok: több kép egymáson

Ha több képet szeretnél háttérként használni, egyszerűen sorold fel őket vesszővel elválasztva a background-image tulajdonságban. Az első kép kerül legfelülre, a következők alá.

Ebben a példában két kép van a háttérben: egy csillagos ég és egy hold. A pozicionálással szabályozzuk, hogy hol jelenjenek meg.

Gradiensek és képek kombinálása

A gradienseket is használhatod háttérként, és kombinálhatod képekkel. Ez hasznos például, ha sötétíteni akarod a képet anélkül, hogy módosítanád magát a képfájlt.

Itt egy lineáris gradiens kerül a kép fölé, amely átlátszó fekete réteget ad a tájképhez. Ez gyakori megoldás, ha a szöveg olvashatóságát szeretnénk javítani.

Tippek többszörös háttérhez

Néhány gyakorlati tanács a többszörös háttérképek használatához:

• Mindig ellenőrizd, hogy a háttérképek jól illeszkednek kisebb képernyőkön is.
• Használj gradienseket, hogy kiemeld a szövegeket a háttérből.
• A sorrend meghatározza a rétegek egymásra helyezését: az első réteg mindig legfelül van.