ฟังก์ชัน contrast() ของ CSS

การกำหนดและการใช้งาน

CSS contrast() ฟังก์ชันตัวกรองใช้เพื่อปรับปรุงความเปราะงค์ขององค์ประกอบ

• 0% จะทำให้ภาพหายตัวเงิน
• 100% (หรือ 1) เป็นค่าเริ่มต้น แสดงว่าภาพต้นฉบับ
• ค่าที่เกิน 100% จะเพิ่มความเปราะงค์
• ค่าที่ต่ำกว่า 100% จะลดความเปราะงค์

ตัวอย่าง

ตัวอย่าง 1

เพิ่มและลดความเปราะงค์ของภาพ

#img1 {
  filter: contrast(150%);
}
#img2 {
  filter: contrast(50%);
}

ลองทดสอบด้วยตัวเอง

ตัวอย่าง 2

และ contrast() กับ backdrop-filter ใช้ค่าที่เชื่อมโยงกัน：

div.transbox {
  background-color: rgba(255, 255, 255, 0.4);
  -webkit-backdrop-filter: contrast(150%);
  backdrop-filter: contrast(150%);
  padding: 20px;
  margin: 30px;
  font-weight: bold;
}

ลองทดสอบด้วยตัวเอง

ภาษา CSS

contrast(amount)

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

การสนับสนุนโปรแกรมบราวเซอร์

ตัวเลขในตารางนี้แสดงว่าเวอร์ชั่นบราวเซอร์ที่สนับสนุนฟังก์ชันนี้อย่างเต็มที่

หน้าที่เกี่ยวข้อง

อ้างอิง:CSS ฟิลเตอร์

อ้างอิง:ฟังก์ชัน blur() ของ CSS

อ้างอิง:ฟังก์ชัน brightness() ของ CSS

อ้างอิง:ฟังก์ชัน drop-shadow() ของ CSS

อ้างอิง:ฟังก์ชัน grayscale() ของ CSS

อ้างอิง:ฟังก์ชัน hue-rotate() ของ CSS

อ้างอิง:ฟังก์ชัน invert() ของ CSS

อ้างอิง:ฟังก์ชัน opacity() ของ CSS

อ้างอิง:ฟังก์ชัน CSS saturate()

อ้างอิง:ฟังก์ชัน CSS sepia()