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

หน้าก่อน CSS scaleY() 函数
หน้าต่อไป CSS sin() 函数
กลับไปยังระดับเดิม คู่มืออ้างอิงฟังก์ชัน CSS

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

CSS ของ sepia() ฟังก์ชันฟิลเตอร์จะแปลงภาพเป็นน้ำเงินดำ（สีที่อุ่นกว่าและสีน้ำตาล/แดงแท้นมากขึ้น）。

100%（หรือ 1）จะทำให้ภาพแปลงเป็นน้ำเงินดำอย่างสมบูรณ์
0%（หรือ 0）จะไม่มีประสิทธิภาพ

ตัวอย่าง

ตัวอย่าง 1

ตั้งค่าประสิทธิภาพน้ำเงินดำต่าง ๆ สำหรับภาพ

#img1 {
  filter: sepia(1);
}
#img2 {
  filter: sepia(60%);
}
#img3 {
  filter: sepia(0.4);
}

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

ตัวอย่าง 2

ใช้ sepia() กับ backdrop-filter ใช้รวมคุณสมบัติ

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

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

CSS การใช้งานภาษา

sepia(amount)

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

ค่า

รายละเอียด

amount

เลือกตั้งได้。กำหนดค่าน้ำเงินดำ，สามารถเป็นตัวเลขหรือเปอร์เซ็นต์。

100%（หรือ 1）ทำให้องค์ประกอบแปลงเป็นน้ำเงินดำอย่างสมบูรณ์。

0%（หรือ 0）แสดงถึงภาพต้นฉบับ（ไม่มีประสิทธิภาพ）。ค่าเริ่มต้นคือ 0。