Tła i obrazy

Dostępny

1.1 Właściwość background-color

Właściwość background-color ustawia kolor tła dla elementu. Pozwala na określenie koloru wypełnienia tła, zapewniając wizualne oddzielenie treści i poprawiając odbiór tekstu i innych elementów.

Wartości:

  • Nazwy kolorów: możesz użyć predefiniowanych nazw kolorów, takich jak red, blue, green
  • Wartości szesnastkowe: na przykład #ff0000, #00ff00, #0000ff
  • RGB: na przykład rgb(255, 0, 0), rgb(0, 255, 0), rgb(0, 0, 255)
  • RGBA: na przykład rgba(255, 0, 0, 0.5) (półprzezroczysty czerwony)
  • HSL: na przykład hsl(0, 100%, 50%), hsl(120, 100%, 50%), hsl(240, 100%, 50%)
  • HSLA: na przykład, hsla(0, 100%, 50%, 0.5) (półprzezroczysty czerwony).

Przykład użycia:

CSS
.color-red {
  background-color: red;
}

.color-hex {
  background-color: #3498db;
}

.color-rgba {
  background-color: rgba(46, 204, 113, 0.7);
}
HTML
<body>
  <div class="color-red">Ten element ma czerwone tło.</div>
  <div class="color-hex">Ten element ma tło z kolorem w formacie szesnastkowym.</div>
  <div class="color-rgba">Ten element ma półprzezroczyste zielone tło.</div>
</body>

Wyjaśnienie kodu:

  • background-color: red;: ustawia czerwone tło dla elementu
  • background-color: #3498db;: ustawia kolor tła za pomocą wartości szesnastkowej
  • background-color: rgba(46, 204, 113, 0.7);: ustawia półprzezroczyste zielone tło z użyciem RGBA

1.2 Właściwość background-image

Właściwość background-image ustawia obraz tła dla elementu. Pozwala na użycie obrazów do tworzenia wizualnie atrakcyjnych teł, poprawiając wygląd i odbiór strony internetowej.

Jako wartość należy podać URL obrazu — wskazać ścieżkę do obrazu, który będzie używany jako tło. Na przykład, url('image.jpg').

Przykład użycia:

CSS
.background-url {
  background-image: url('https://via.placeholder.com/150');
  width: 150px;
  height: 150px;
  border: 1px solid #000;
}
HTML
<body>
  <div class="background-url">Ten element ma obraz jako tło.</div>
</body>

Wyjaśnienie kodu:

  • background-image: url('https://via.placeholder.com/150');: ustawia obraz jako tło dla elementu. W tym przypadku używany jest URL obrazu

Zalety użycia background-image:

  1. Atrakcyjność wizualna: użycie obrazów tła pozwala na tworzenie bardziej atrakcyjnych i interesujących stron internetowych.
  2. Kontekst: obrazy tła mogą dostarczać dodatkowy kontekst lub informację, wzmacniając wizualny odbiór zawartości strony.
  3. Branding: obrazy tła mogą być częścią brandingu, pomagając zachować spójny styl i rozpoznawalność strony.

Wskazówki dotyczące użycia obrazów tła:

  • Optymalizacja obrazów: dla poprawy wydajności strony ważne jest optymalizowanie obrazów, zmniejszając ich rozmiar bez znacznej utraty jakości
  • Wsparcie międzyprzeglądarkowe: upewnij się, że używane obrazy są poprawnie wyświetlane we wszystkich docelowych przeglądarkach
  • Alternatywny tekst: dla obrazów, które mają istotne znaczenie, należy przewidzieć alternatywne sposoby przekazywania informacji, takie jak opisy tekstowe, dla użytkowników z ograniczeniami

1.3 Wspólne użycie background-color i background-image

Właściwości background-color i background-image mogą być używane razem do tworzenia złożonych i atrakcyjnych teł. Na przykład, można ustawić kolor tła, który będzie widoczny, jeśli obraz tła się nie załaduje, lub użyć kolorowego tła w połączeniu z półprzezroczystym obrazem.

Przykład użycia:

CSS
.combined-background {
  background-color: #3498db;
  background-image: url('https://via.placeholder.com/150');
  width: 300px;
  height: 300px;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border: 1px solid #000;
}
HTML
<body>
  <div class="combined-background">
    Ten element ma połączone tło z obrazem i kolorem tła.
  </div>
</body>

Wyjaśnienie kodu:

  • background-color: #3498db;: ustawia kolor tła
  • background-image: url('https://via.placeholder.com/150');: ustawia obraz tła
  • width: 300px; height: 300px;: ustawia wymiary elementu
  • color: white;: ustawia kolor tekstu dla lepszej czytelności na tle
  • display: flex; align-items: center; justify-content: center; text-align: center;: centrowanie tekstu wewnątrz elementu
  • border: 1px solid #000;: dodaje ramkę wokół elementu dla wizualnego wyróżnienia
1
Zadanie
Frontend SELF PL,  poziom 18lekcja 1
Niedostępne
Kolory tła
Kolory tła
1
Zadanie
Frontend SELF PL,  poziom 18lekcja 1
Niedostępne
Obrazek tła
Obrazek tła
Komentarze
  • Popularne
  • Najnowsze
  • Najstarsze
Musisz się zalogować, aby dodać komentarz
Ta strona nie ma jeszcze żadnych komentarzy