Fungsi sepia
Fungsi sepia membolehkan
imej latar belakang dijadikan sepia -
imej hitam putih dengan rona
perang. Nilai 0 menandakan
imej akan kekal asal.
Nilai 100% atau 1 sepenuhnya
menukar latar belakang kepada sepia. Sebarang nombor yang terletak dalam
julat ini menetapkan aplikasi sepia secara linear.
Nilai negatif tidak boleh ditetapkan.
Secara lalai, nilai adalah 0.
Sintaks
pemilih {
filter: sepia(nombor);
}
Contoh
Mari jadikan imej kita sepia sepenuhnya:
<div id="elem"></div>
#elem {
filter: sepia(100%);
background: url("bg.png") center / cover no-repeat;
width: 400px;
height: 300px;
border: 1px solid black;
}
:
Contoh
Sekarang mari kurangkan aplikasi sepia
kepada 50%:
<div id="elem"></div>
#elem {
filter: sepia(50%);
background: url("bg.png") center / cover no-repeat;
width: 400px;
height: 300px;
border: 1px solid black;
}
:
Contoh
Sekarang mari tetapkan dalam
fungsi sepia nilai
bersamaan 0:
<div id="elem"></div>
#elem {
filter: sepia(0);
background: url("bg.png") center / cover no-repeat;
width: 400px;
height: 300px;
border: 1px solid black;
}
:
Lihat juga
-
fungsi
blur,
yang mengaburkan latar belakang -
fungsi
brightness,
yang menetapkan kecerahan latar belakang -
fungsi
contrast,
yang menetapkan kontras latar belakang -
fungsi
drop-shadow,
yang menetapkan bayangan untuk latar belakang -
fungsi
hue-rotate,
yang menetapkan kewarnaan latar belakang -
fungsi
invert,
yang menyongsangkan warna latar belakang -
fungsi
opacity,
yang menetapkan ketelusan latar belakang -
sifat
background,
yang mewakili sifat singkatan untuk latar belakang -
sifat
background-image,
yang boleh digunakan untuk menetapkan imej latar belakang kepada blok -
sifat
filter,
yang menetapkan gaya untuk latar belakang