CSS image-rendering ทรัพย์คุณ

กำหนดและวิธีใช้

image-rendering คุณสมบัตินี้กำหนดอัลกอริทึมการขยายภาพ

แจ้งเตือน:คุณสมบัตินี้ไม่มีผลต่อภาพที่ไม่ถูกย่อลง

ตัวอย่าง

แสดงอัลกอริทึมที่สามารถใช้สำหรับการขยายภาพ

.image {
  height: 100px;
  width: 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;
}

ลองเดาะด้วยตัวเอง

ระบบการเขียน CSS

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

ค่าของคุณสมบัติ

ค่า รายละเอียด
auto ให้เบราเซอร์เลือกอัลกอริทึมการขยาย ค่าเริ่มต้น
smooth ใช้อัลกอริทึมเพื่อทำให้สีภาพละลายในภาพ
high-quality เหมือน smooth แต่มีความนิยมในการขยายที่คุณภาพสูง
crisp-edges ใช้อัลกอริทึมเพื่อรักษาความเปราะบางและขอบของภาพ
pixelated

ถ้าภาพถูกขยาย จะใช้อัลกอริทึมขับเคลื่อนเกียงใกล้เคียง ดังนั้นภาพจะดูเหมือนประกอบด้วยจุดภาพใหญ่

ถ้าภาพถูกย่อลง จะมีค่าเท่ากับ auto
initial ตั้งค่าคุณสมบัตินี้เป็นค่าเริ่มต้น ดูถึง initial。
inherit มีความหมายว่าเรียกใช้คุณสมบัตินี้จากตัวปลายทางพ่อของมัน ดูถึง inherit。

รายละเอียดเทคนิค

ค่าเริ่มต้น: auto
ความสืบทอด: yes
การสร้างแอนิเมชัน: ไม่สนับสนุน。ดูถึง:คุณสมบัติที่เกี่ยวกับอนุรักษ์แอนิเมชัน。
เวอร์ชัน: CSS3
ระบบการเขียน JavaScript: object.style.imageRendering="pixelated"

การสนับสนุนเบราเซอร์

ตัวเลขในตารางนี้แสดงค่าสำหรับเวอร์ชันเบราเซอร์ที่สนับสนุนคุณสมบัตินี้ครบถ้วน

Chrome Edge Firefox Safari Opera
41.0 79.0 65.0 10.0 28.0

Chrome、Edge และ Opera ใช้ -webkit-optimize-contrast ในฐานะชื่อย่อของ crisp-edges ค่า