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

หน้าก่อน CSS inset() ฟังก์ชัน
หน้าต่อไป CSS lab() ฟังก์ชัน
กลับไปยังเพจหนึ่งระดับต้น คู่มืออ้างอิงฟังก์ชัน CSS

การประกาศและการใช้งาน

CSS invert() ฟังก์ชันฟิลเตอร์ใช้เพื่อเปลี่ยนสีภาพ

100% (1) จะทำให้ภาพหลับครบถ้วน
0% (0) จะไม่มีผลใดๆ

ตัวอย่าง

ตัวอย่าง 1

เปลี่ยนสีภาพในการเล็กน้อย

#img1 {
  filter: invert(0.3);
}
#img2 {
  filter: invert(70%);
}
#img3 {
  filter: invert(100%);
}

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

ตัวอย่าง 2

จะ invert() กับ backdrop-filter ใช้ประกอบร่วมกันของ

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

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

CSS การใช้งาน

invert(amount)

ค่า	การอธิบาย
amount	ตัวเลือกได้ กำหนดขนาดการหลับ สามารถเป็นตัวเลขหรือเปอร์เซ็น 100% (1) จะทำให้องค์ประกอบหลับครบถ้วน 0% (0) หมายถึงภาพต้นฉบับ (ไม่มีผล) ค่าเริ่มต้นคือ 0。

ค่า

การอธิบาย

amount

ตัวเลือกได้ กำหนดขนาดการหลับ สามารถเป็นตัวเลขหรือเปอร์เซ็น

100% (1) จะทำให้องค์ประกอบหลับครบถ้วน 0% (0) หมายถึงภาพต้นฉบับ (ไม่มีผล)

ค่าเริ่มต้นคือ 0。