Fungsi linear-gradient
Fungsi linear-gradient menentukan gradien
linear. Digunakan untuk sifat yang
menentukan gambar latar belakang: background,
background-image
atau gambar sempadan: border-image,
background-image-source.
Sintaksis
pemilih {
background: linear-gradient([sudut atau arah], warna1 saiz1, warna2 saiz2...);
}
Nilai
| Nilai | Keterangan |
|---|---|
| arah |
Menentukan arah tertentu gradien dalam sebarang unit untuk sudut
sama ada dengan kata kunci top, left, right, bottom
atau gabungannya: top left, top right dan sebagainya.
Urutan kata tidak penting: boleh tulis top left dan left top,
tiada perbezaan. Parameter adalah pilihan: jika tidak ditulis, gradien akan
berlaku dari atas ke bawah (seperti to top). Sebelum arah diletakkan perkataan to.
|
| sudut | Sudut dalam sebarang unit untuk sudut. Boleh positif atau negatif. Parameter adalah pilihan. Serentak boleh ditetapkan sama ada sudut, atau arah (atau langsung tiada). |
| warna1 | Warna permulaan gradien dalam sebarang unit untuk warna. |
| warna2 | Warna akhir gradien dalam sebarang unit untuk warna. |
| saiz | Menentukan panjang warna tertentu gradien dalam sebarang unit untuk saiz. |
Contoh . Pilihan paling mudah
Sintaksis:
pemilih {
background: linear-gradient(warna permulaan, warna akhir);
}
Mari lihat contoh:
<div id="elem"></div>
#elem {
background: linear-gradient(black, red);
width: 200px;
height: 200px;
}
:
Contoh . Menambah sudut
Sintaksis:
pemilih {
background: linear-gradient(sudut, warna permulaan, warna akhir);
}
Mari lihat contoh:
<div id="elem"></div>
#elem {
background: linear-gradient(45deg, black, red);
width: 200px;
height: 200px;
}
:
Contoh . Menambah arah
Selain sudut boleh tambah arah
top, left, right, bottom
atau gabungannya: top left, top right
Sebelum arah diletakkan perkataan to.
Sintaksis:
pemilih {
background: linear-gradient(arah, warna permulaan, warna akhir);
}
Mari lihat contoh:
<div id="elem"></div>
#elem {
background: linear-gradient(to left, black, red);
width: 200px;
height: 200px;
}
:
Contoh . Menambah arah
Tentukan arah lain:
<div id="elem"></div>
#elem {
background: linear-gradient(to top left, black, red);
width: 200px;
height: 200px;
}
:
Contoh . Menambah saiz
Sintaksis:
pemilih {
background: linear-gradient(warna1 saiz1, warna2 saiz2);
}
Dalam contoh berikut kelakuan akan seperti berikut:
warna merah tulen akan dari 0px hingga
30px, dari 30px hingga 50px
akan gradien dari merah ke biru, dan
dari 50px dan hingga akhir - biru tulen:
<div id="elem"></div>
#elem {
background: linear-gradient(red 30px, blue 50px);
width: 200px;
height: 200px;
}
:
Contoh . Menambah lebih daripada 2 warna
Sintaksis:
pemilih {
background: linear-gradient(warna1 saiz1, warna2 saiz2, warna3 saiz3...);
}
Dalam contoh berikut kelakuan akan seperti berikut:
warna merah tulen akan dari 0px hingga
30px, dari 30px hingga 50px
akan gradien dari merah ke biru, dan
dari 50px hingga 70px - gradien dari biru
ke hijau, dan selepas 70px - hijau tulen:
<div id="elem"></div>
#elem {
background: linear-gradient(red 30px, blue 50px, green 70px);
width: 200px;
height: 200px;
}
:
Contoh . Peralihan tajam
Dalam contoh berikut kelakuan akan seperti berikut:
warna merah tulen akan dari 0px hingga
30px, biru tulen - dari 30px
hingga 60px, hijau tulen - selepas 60px
(red 0px boleh juga tidak ditulis):
<div id="elem"></div>
#elem {
background: linear-gradient(red 0px, red 30px, blue 30px, blue 60px, green 60px);
width: 200px;
height: 200px;
}
:
Contoh . Saiz boleh ditetapkan dalam peratus juga
Dalam contoh berikut kelakuan akan seperti berikut:
warna merah tulen akan dari 0% hingga
30%, biru tulen - dari 30%
hingga 60%, hijau tulen - selepas 60%
(red 0% boleh juga tidak ditulis):
<div id="elem"></div>
#elem {
background: linear-gradient(red 0%, red 30%, blue 30%, blue 60%, green 60%);
width: 200px;
height: 200px;
}
:
Contoh . Gabungan dengan background-size
Dalam contoh berikut kelakuan akan seperti berikut:
warna merah tulen akan dari 0px hingga
30px, biru tulen - dari 30px
hingga 60px, dengan semua ini akan berulang
sebahagian demi 60px (disebabkan background-size:
60px;):
<div id="elem"></div>
#elem {
background: linear-gradient(to right, red 30px, blue 30px, blue 60px);
background-size: 60px 60px;
width: 200px;
height: 200px;
}
:
Lihat juga
-
fungsi
radial-gradient,
yang mencipta gradien jejari -
fungsi
repeating-linear-gradient,
yang mencipta gradien linear berulang -
fungsi
repeating-radial-gradient,
yang mencipta gradien jejari berulang
