属性 CSS image-rendering

Penggambangan dan Pemakaian

image-rendering Sifat menentukan jenis algoritma pengukuran yang digunakan untuk pengukuran gambar.

Perhatian:Sifat ini tidak berlaku untuk gambar yang belum disampingkan.

Contoh

Menampilkan algoritma yang dapat digunakan untuk pengukuran gambar:

.image {
  tinggi: 100px;
  lebar: 100px;
  image-rendering: auto;
}
.crisp-edges {
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}
.pixelated {
  image-rendering: pixelated;
}
.smooth {
  image-rendering: smooth;
}
.high-quality {
  image-rendering: high-quality;
}

Coba sendiri

Bentuk kalimat CSS

image-rendering: auto|smooth|high-quality|crisp-edges|pixelated|initial|inherit;

Nilai atribut

Nilai Deskripsi
auto Memungkinkan peramban untuk memilih algoritma pengukuran. Nilai baku.
smooth Menggunakan algoritma untuk merapikan warna di dalam gambar
high-quality Sama seperti smooth, tetapi lebih memilih pengukuran yang tinggi
crisp-edges Menggunakan algoritma untuk mempertahankan kontras dan边缘 di dalam gambar
pixelated

Jika gambar disukat, maka digunakan algoritma terdekat, sehingga gambar akan terlihat terdiri dari pixel besar.

Jika gambar disampingkan, maka sama seperti auto.
initial Menata sifat ini ke nilai baku. Lihat initial.
inherit Mengambil sifat ini dari elemen induknya. Lihat inherit.

Detil teknis

Nilai baku: auto
Inheritsi: yes
Pembuatan animasi: Tidak didukung. Lihat:Atribut yang berhubungan dengan animasi.
Versi: CSS3
Bentuk kalimat JavaScript: object.style.imageRendering="pixelated"

Dukungan peramban

Angka di dalam tabel menunjukkan versi paling awal peramban yang mendukung sifat ini.

Chrome Edge Firefox Safari Opera
41.0 79.0 65.0 10.0 28.0

Chrome、Edge dan Opera menggunakan -webkit-optimize-contrast sebagai ejaan lain bagi crisp-edges.