CSS linear-gradient() Funkcja
Przykład
Ten liniowy gradient zaczyna się u góry. Zaczyna się na czerwono, przechodząc w żółty, a następnie w niebieski:
#grad {
background-image: linear-gradient(red, yellow, blue);
}
Więcej przykładów „Wypróbuj sam” poniżej.
Definicja i użycie
Funkcja linear-gradient() ustawia gradient liniowy jako obraz tła.
Aby utworzyć gradient liniowy, musisz zdefiniować co najmniej dwa stopnie koloru. Stopnie kolorów to kolory, między którymi chcesz renderować płynne przejścia. Możesz także ustawić punkt początkowy i kierunek (lub kąt) wraz z efektem gradientu.
Przykład gradientu liniowego:
| Wersja: | CSS3 |
|---|
Obsługa przeglądarki
Liczby w tabeli określają pierwszą wersję przeglądarki, która w pełni obsługuje tę funkcję.
Liczby, po których następuje -webkit-, -moz- lub -o- określają pierwszą wersję, która działała z przedrostkiem.
| Function | |||||
|---|---|---|---|---|---|
| linear-gradient() | 26.0 10.0 -webkit- |
10.0 | 16.0 3.6 -moz- |
6.1 5.1 -webkit- |
12.1 11.1 -o- |
Składnia CSS
background-image: linear-gradient(direction, color-stop1,
color-stop2, ...);
| Value | Description |
|---|---|
| direction | Defines a starting point and a direction (or an angle) along with the gradient effect. |
| color-stop1, color-stop2,... | Color stops are the colors you want to render smooth transitions among. This value consists of a color value, followed by an optional stop position (a percentage between 0% and 100% or a length along the gradient axis). |
Więcej przykładów
Przykład
Gradient liniowy rozpoczynający się od lewej. Zaczyna się na czerwono, przechodząc w niebieski:
#grad {
background-image: linear-gradient(to right, red , blue);
}
Przykład
Gradient liniowy, który zaczyna się w lewym górnym rogu (i przechodzi w dolny prawy):
#grad {
background-image: linear-gradient(to bottom right, red , blue);
}
Przykład
Gradient liniowy o określonym kącie:
#grad {
background-image: linear-gradient(180deg, red, blue);
}
Przykład
Gradient liniowy z wieloma przystankami koloru:
#grad {
background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);
}
Przykład
Gradient liniowy z przezroczystością:
#grad {
background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}
Powiązane strony
Samouczek CSS: Gradienty CSS