ฟังก์ชัน sepia
ฟังก์ชัน sepia ช่วยให้
คุณสามารถสร้างเอฟเฟกต์ภาพซีเปียให้กับรูปภาพพื้นหลังได้ -
ซึ่งคือภาพขาวดำที่มีโทนสีน้ำตาล
ค่า 0 หมายถึง
ภาพจะคงสภาพเดิมไว้
ค่า 100% หรือ 1 จะเปลี่ยน
พื้นหลังให้เป็นซีเปียโดยสมบูรณ์ ตัวเลขใด ๆ ที่อยู่
ในช่วงนี้จะกำหนดการใช้งานเอฟเฟกต์ซีเปียแบบเชิงเส้น
ไม่สามารถกำหนดค่าเป็นค่าลบได้
ค่าเริ่มต้นคือ 0
ไวยากรณ์
selector {
filter: sepia(number);
}
ตัวอย่าง
มาสร้างเอฟเฟกต์ซีเปียเต็มรูปแบบให้กับ ภาพของเรากัน:
<div id="elem"></div>
#elem {
filter: sepia(100%);
background: url("bg.png") center / cover no-repeat;
width: 400px;
height: 300px;
border: 1px solid black;
}
:
ตัวอย่าง
คราวนี้ ลองลดระดับการใช้งานซีเปีย
ลงที่ 50%:
<div id="elem"></div>
#elem {
filter: sepia(50%);
background: url("bg.png") center / cover no-repeat;
width: 400px;
height: 300px;
border: 1px solid black;
}
:
ตัวอย่าง
คราวนี้ ลองกำหนดค่าใน
ฟังก์ชัน sepia
ให้เท่ากับ 0:
<div id="elem"></div>
#elem {
filter: sepia(0);
background: url("bg.png") center / cover no-repeat;
width: 400px;
height: 300px;
border: 1px solid black;
}
:
ดูเพิ่มเติม
-
ฟังก์ชัน
blur,
ซึ่งทำให้พื้นหลังเบลอ -
ฟังก์ชัน
brightness,
ซึ่งกำหนดความสว่างให้กับพื้นหลัง -
ฟังก์ชัน
contrast,
ซึ่งกำหนดความคมชัดให้กับพื้นหลัง -
ฟังก์ชัน
drop-shadow,
ซึ่งกำหนดเงาให้กับพื้นหลัง -
ฟังก์ชัน
hue-rotate,
ซึ่งกำหนดโทนสี (สีสัน) ให้กับพื้นหลัง -
ฟังก์ชัน
invert,
ซึ่งสลับสีของพื้นหลัง -
ฟังก์ชัน
opacity,
ซึ่งกำหนดความโปร่งใสให้กับพื้นหลัง -
คุณสมบัติ
background,
ซึ่งเป็นคุณสมบัติแบบย่อสำหรับพื้นหลัง -
คุณสมบัติ
background-image,
ซึ่งใช้กำหนดรูปภาพพื้นหลังให้กับบล็อก -
คุณสมบัติ
filter,
ซึ่งกำหนดสไตล์สำหรับพื้นหลัง