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:
.color-red {
background-color: red;
}
.color-hex {
background-color: #3498db;
}
.color-rgba {
background-color: rgba(46, 204, 113, 0.7);
}
<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 elementubackground-color: #3498db;: ustawia kolor tła za pomocą wartości szesnastkowejbackground-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:
.background-url {
background-image: url('https://via.placeholder.com/150');
width: 150px;
height: 150px;
border: 1px solid #000;
}
<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:
- Atrakcyjność wizualna: użycie obrazów tła pozwala na tworzenie bardziej atrakcyjnych i interesujących stron internetowych.
- Kontekst: obrazy tła mogą dostarczać dodatkowy kontekst lub informację, wzmacniając wizualny odbiór zawartości strony.
- 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:
.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;
}
<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łabackground-image: url('https://via.placeholder.com/150');: ustawia obraz tławidth: 300px;height: 300px;: ustawia wymiary elementucolor: white;: ustawia kolor tekstu dla lepszej czytelności na tledisplay: flex;align-items: center;justify-content: center;text-align: center;: centrowanie tekstu wewnątrz elementuborder: 1px solid #000;: dodaje ramkę wokół elementu dla wizualnego wyróżnienia
GO TO FULL VERSION