Sifat filter CSS

定义和用法

filter 属性定义元素（通常是 <img>）的视觉效果（如模糊和饱和度）。

另请参阅：

CSS 教程：CSS 图像

HTML DOM 参考手册：filter 属性

实例

将所有图像更改为黑白（100% 灰色）：

img {
  filter: grayscale(100%);
}

Coba sendiri

提示：更多 TIY 实例可以在页面下方找到。

CSS 语法

filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();

提示：Untuk menggunakan beberapa filter, pisahkan setiap filter dengan spasi (lihat contoh lebih banyak di bawah halaman).

Detil teknis

Nilai default: none
Warisan: Tidak
Pembuatan animasi: Dukung. Lihat:Properti berhubungan dengan animasi。
Versi: CSS3
Syarat JavaScript: object.style.filter="grayscale(100%)"

Fungsi filter

Keterangan:Gunakan persen (contoh 75%) filter, menerima nilai desimal (contoh 0.75).

Filter Deskripsi
none Nilai default. Tentukan tanpa efek.
blur(px)

Terapkan efek blur kepada gambar. Nilai yang semakin besar akan mencipta blur yang semakin banyak.

Jika nilai disyorkan, gunakan 0.
brightness(%)

Tolongkan kecerahan gambar.

  • 0% akan membuat gambar mengecil sepenuhnya.
  • Nilai default adalah 100%, mewakili gambar asli.
  • Nilai yang lebih dari 100% akan memberikan hasil yang lebih terang.
contrast(%)

Tolongkan kontras gambar.

  • 0% akan membuat gambar mengecil sepenuhnya.
  • Nilai default adalah 100%, mewakili gambar asli.
  • Nilai lebih dari 100% akan memberikan hasil yang lebih kontras.
drop-shadow(h-shadow v-shadow blur spread color)

Terapkan efek bayangan kepada gambar.

Nilai yang mungkin:

  • h-shadow - wajib. Tentukan nilai piksel bayangan horizontal. Nilai negatif akan menempatkan bayangan di kiri gambar.
  • v-shadow - wajib. Tentukan nilai piksel bayangan vertikal. Nilai negatif akan menempatkan bayangan di atas gambar.

blur - pilihan. Ini adalah nilai ke-3, unitnya harus dalam piksel. Tambahkan efek blur kepada bayangan. Nilai yang semakin besar akan mencipta blur yang semakin besar (bayangan akan menjadi semakin besar dan terang). Tidak diizinkan nilai negatif. Jika nilai tidak disyorkan, akan digunakan 0 (边际 bayangan akan sangat tajam).

spread - pilihan. Ini adalah nilai ke-4, unitnya harus dalam piksel. Nilai positif akan mengembangkan bayangan dan membesarkannya, sementara nilai negatif akan memperkecil bayangan. Jika nilai tidak disyorkan, akan digunakan 0 (bayangan sama besar dengan ukuran elemen).

Keterangan:Chrome, Safari dan Opera, mungkin juga pelayar lain, tidak mendukung panjang ke-4; jika ditambahkan, maka tidak akan muncul.

color - pilihan. Tambahkan warna kepada bayangan. Jika tidak disyorkan, warna bergantung kepada pelayar (biasanya hitam).

Contoh ini mencipta bayangan merah, arah horizontal dan vertical sebanyak 8px, dengan efek blur sebanyak 10px:

filter: drop-shadow(8px 8px 10px red);

提示：这个滤镜类似于 box-shadow 属性。
grayscale(%)

将图像转换为灰阶。

  • 0% (0) 是默认值，代表原始图像。
  • 100％ 将使图像完全变灰（用于黑白图像）。

Keterangan:不允许负值。
hue-rotate(deg)

在图像上应用色相旋转。该值定义色环的度数。默认值为 0deg，代表原始图像。

Keterangan:最大值是 360deg。
invert(%)

反转图像中的样本。

  • 0% (0) 是默认值，代表原始图像。
  • 100％将使图像完全反转。

Keterangan:不允许负值。
opacity(%)

设置图像的不透明度级别。opacity-level 描述了透明度级别，其中：

  • 0% 为完全透明。
  • 100% (1) 是默认值，代表原始图像（不透明）。

Keterangan:不允许负值。

提示：这个滤镜类似于 opacity 属性。
saturate(%)

设置图像的饱和度。

  • 0% (0) 将使图像完全无饱和。
  • 100% 是默认值，代表原始图像。
  • 超过 100% 的值提供超饱和结果。

Keterangan:不允许负值。
sepia(%)

将图像转换为棕褐色。

  • 0% (0) 是默认值，代表原始图像。
  • 100％ 将使图像完全变为棕褐色。

Keterangan:不允许负值。
url();

url() 函数接受规定 SVG 滤镜的 XML 文件的位置，并且可以包含指向特定滤镜元素的锚点。示例：

filter: url(svg-url#element-id);
initial 将此属性设置为其默认值。参阅 initial。
inherit 从其父元素继承此属性。参阅 inherit。

更多示例

模糊示例

为图像添加模糊效果：

img {
  filter: blur(5px);
}

Coba sendiri

模糊示例 2

应用模糊的背景图片：

img.background {
  filter: blur(35px);
}

Coba sendiri

亮度示例

调整图像的亮度：

img {
  filter: brightness(200%);
}

Coba sendiri

对比度示例

调整图像的对比度：

img {
  filter: contrast(200%);
}

Coba sendiri

阴影示例

应用图像的阴影效果：

img {
  filter: drop-shadow(8px 8px 10px gray);
}

Coba sendiri

Contoh skala abu-abu

Konversi gambar ke skala abu-abu:

img {
  filter: grayscale(50%);
}

Coba sendiri

Contoh putar warna

Terapkan putar warna di atas gambar:

img {
  filter: hue-rotate(90deg);
}

Coba sendiri

Contoh balikan

Balikkan contoh dalam gambar:

img {
  filter: invert(100%);
}

Coba sendiri

Contoh kecerahan

Tetapkan tingkat kecerahan gambar:

img {
  filter: opacity(30%);
}

Coba sendiri

Contoh kemesan

Tayangkan kemesan gambar:

img {
  filter: saturate(800%);
}

Coba sendiri

Contoh kopi warna

Konversi gambar ke warna kopi:

img {
  filter: sepia(100%);
}

Coba sendiri

Gunakan filter berbagai macam

Untuk menggunakan beberapa filter, pisahkan setiap filter dengan spasi. Perhatikan urutan penting (contoh, penggunaan grayscale() setelah sepia() akan menghasilkan gambar putih kelabu):

img {
  filter: contrast(200%) brightness(150%);
}

Coba sendiri

Semua filter

Demo semua fungsi filter:

.blur {
  filter: blur(4px);
}
.brightness {
  filter: brightness(0.30);
}
.contrast {
  filter: contrast(180%);
}
.grayscale {
  filter: grayscale(100%);
}
.huerotate {
  filter: hue-rotate(180deg);
}
.invert {
  filter: invert(100%);
}
.opacity {
  filter: opacity(50%);
}
.saturate {
  filter: saturate(7);
}
.sepia {
  filter: sepia(100%);
}
.shadow {
  filter: drop-shadow(8px 8px 10px green);
}

Coba sendiri

Dukungan peramban

Angka di tabel menunjukkan versi pertama penggunaan penuh atribut ini.

Angka yang diikuti dengan -webkit- menunjukkan versi pertama yang menggunakan prefiks.

Chrome IE / Edge Firefox Safari Opera
53.0
18.0 -webkit-		 13.0 35.0 9.1
6.0 -webkit-		 40.0
15.0 -webkit-

Keterangan:Versi Internet Explorer yang lama (4.0 hingga 8.0) mendukung atribut "filter" yang sudah usang dan bukan standar. Saat perlu dukungan untuk IE8 dan versi yang lebih rendah, digunakan untuk kecerahan.