CSS kolor i obraz tła

Joanna

CSS

W CSS background to jedna z najczęściej używanych właściwości, umożliwiająca ustawianie koloru tła, obrazów, gradientów oraz wielu zaawansowanych efektów. Umiejętne łączenie background-image i background-color pozwala tworzyć wizualnie atrakcyjne sekcje, bannery, hero images, layouty i całe interfejsy.

Background-color (kolor tła)

To najprostszy i najczęściej używany typ tła. Tło może być określone jako:

  • nazwa koloru (red, gold, black)
  • hex (#ff0000)
  • rgb/rgba (rgba(0,0,0,0.5))
  • hsl (hsl(200, 50%, 50%))
.box {
  background-color: blue;
  background-color: #3498db; /* blue */
  background-color: rgba(52,152,219); /* blue witch 50% opacity */
  background-color: hsl(200, 50%, 50%); /* blue */
}

Background-image (obraz tła)

Pozwala ustawić obraz jako tło elementu. Obsługuje wiele formatów: JPG, PNG, SVG, WebP, gradienty:

.hero {
  background-image: url("banner.jpg");
}

Overlay (kolor na obrazie)

To jeden z najpopularniejszych efektów w nowoczesnych stronach. Dzięki niemu możesz nieco przyciemnić jasny obraz tak, aby nałożony na niego napis był dobrze widoczny.

.overlay {
  background-image:
    linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
    url("photo.jpg");
}

Efekt:

Nowoczesna praca zdalna: jak efektywnie pracować przy komputerze?

Wiele warstw tła (Multiple Backgrounds)

CSS pozwala ustawić wiele obrazów jednocześnie. Warstwy rysowane są od góry do dołu – Pierwszy obraz na liście jest na wierzchu.

.multi {
  background-image: 
    url("stars.png"),
    linear-gradient(to bottom, transparent 0%, rgba(255,200,255,0.9) 100%);
    url("work.png"),
}

Efekt: