ตัวอย่าง
เปลี่ยนสีของภาพที่เป็นสีดำและสีขาวนั้น (100% grayscale) :
// Standard syntax
document.getElementById("myImg").style.filter
= "grayscale(100%)";
// Code for Chrome, Safari and Opera
document.getElementById("myImg").style.WebkitFilter = "grayscale(100%)";
ลองตัวเอง» ความหมายและการใช้งาน
คุณสมบัติกรองเพิ่มผลภาพ (like blur and saturation) ให้กับภาพ
สนับสนุนเบราว์เซอร์
ตัวเลขในตารางระบุราว์เซอร์รุ่นแรกที่สนับสนุนอย่างเต็มที่ทรัพย์สิน
ตามด้วยหมายเลข Webkit ระบุรุ่นแรกที่ทำงานร่วมกับคำนำหน้า
| คุณสมบัติ | |||||
|---|---|---|---|---|---|
| filter | 18.0 Webkit | 13.0 | 35.0 | 6.0 Webkit | 15.0 Webkit |
หมายเหตุ: Chrome, Safari และ Opera สนับสนุนทางเลือกคุณสมบัติ WebkitFilter
วากยสัมพันธ์
คืนทรัพย์สินกรอง:
object .style.filterตั้งค่าคุณสมบัติกรอง:
object .style.filter="none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate()
| invert() | opacity() | saturate() | sepia()"
ฟังก์ชั่นกรอง
หมายเหตุ: ฟิลเตอร์ที่ใช้ค่าร้อยละ (ie 75%) นอกจากนี้ยังยอมรับค่าเป็นทศนิยม (ie 0.75)
| กรอง | ลักษณะ |
|---|---|
| ไม่มี | ระบุไม่มีผล |
| blur( px ) | ใช้ผลเบลอไปยังภาพที่ ค่าขนาดใหญ่จะสร้างเบลอมากขึ้น หากไม่มีการระบุค่าเป็น 0 ใช้ |
| brightness( % ) | ปรับความสว่างของภาพ 0% จะทำให้ภาพสีดำสนิท 100% (1) เป็นค่าเริ่มต้นและแสดงภาพต้นฉบับ ค่ากว่า 100% จะให้ผลที่สดใส |
| contrast( % ) | ปรับความคมชัดของภาพ 0% จะทำให้ภาพสีดำสนิท 100% (1) เป็นค่าเริ่มต้นและแสดงภาพต้นฉบับ ค่ากว่า 100% จะให้ผลลัพธ์ที่มีความคมชัดน้อย |
| แบบดึง shadow( h-shadow v-shadow blur spread color ) | ใช้ผลลดลงเงาภาพ ค่าที่เป็นไปได้: H-เงา - จำเป็น ระบุค่าพิกเซลสำหรับเงาแนวนอน ค่าลบเงาวางทางด้านซ้ายของภาพ V-เงา - จำเป็น ระบุค่าพิกเซลสำหรับเงาแนวตั้ง ค่าลบเงาวางด้านบนของภาพ เบลอ - เลือก นี้เป็นค่าที่สามและจะต้องอยู่ในพิกเซล เพิ่มผลเบลอให้เงา ค่าขนาดใหญ่จะสร้างเบลอมากขึ้น (เงาจะกลายเป็นใหญ่และมีน้ำหนักเบา) ค่าลบไม่ได้รับอนุญาต หากไม่มีการระบุค่าเป็น 0 ใช้ (ขอบเงาของคมชัด) การแพร่กระจาย - เลือก นี้เป็นค่าที่สี่และจะต้องอยู่ในพิกเซล ค่าบวกจะทำให้เกิดเงาที่จะขยายและเติบโตใหญ่และค่าลบจะทำให้เกิดเงาจะหดตัวลง ถ้าไม่ระบุก็จะเป็น 0 (the shadow will be the same size as the element) หมายเหตุ: Chrome, Safari และ Opera และเบราเซอร์อื่นอาจจะไม่สนับสนุนความยาว 4 นี้ มันจะไม่ทำให้หากมีการเพิ่ม สี: ตัวเลือก เพิ่มสีให้เงา หากไม่มีการระบุสีขึ้นอยู่กับเบราว์เซอร์ (often black) เคล็ดลับ: ตัวกรองนี้จะคล้ายกับ กล่องเงา คุณสมบัติ |
| grayscale( % ) | แปลงภาพระดับสีเทา 0% (0) เป็นค่าเริ่มต้นและแสดงภาพต้นฉบับ 100% จะทำให้ภาพสีเทาสมบูรณ์ (used for black and white images) หมายเหตุ: ค่าลบไม่ได้รับอนุญาต |
| hue- rotate( deg ) | ใช้การหมุนสีบนภาพ ค่าที่กำหนดจำนวนองศารอบวงกลมสีตัวอย่างภาพจะถูกปรับ 0deg เป็นค่าเริ่มต้นและแสดงภาพต้นฉบับ หมายเหตุ: ค่าสูงสุดคือ 360deg |
| invert( % ) | ตีความตัวอย่างในภาพ 0% (0) เป็นค่าเริ่มต้นและแสดงภาพต้นฉบับ 100% จะทำให้ภาพฤๅษีสมบูรณ์ หมายเหตุ: ค่าลบไม่ได้รับอนุญาต |
| opacity( % ) | ตั้งค่าระดับความทึบแสงสำหรับภาพ ระดับความทึบอธิบายถึงความโปร่งใสในระดับที่: 0% มีความโปร่งใสอย่างสมบูรณ์ 100% (1) เป็นค่าเริ่มต้นและแสดงภาพต้นฉบับ (no transparency) หมายเหตุ: ค่าลบไม่ได้รับอนุญาต เคล็ดลับ: กรองนี้จะคล้ายกับ ความทึบ คุณสมบัติ |
| saturate( % ) | อิ่มตัวภาพ 0% (0) จะทำให้ภาพสมบูรณ์ยกเลิกการอิ่มตัว 100% เป็นค่าเริ่มต้นและแสดงภาพต้นฉบับ ค่าเกิน 100% ให้ผลซุปเปอร์อิ่มตัว หมายเหตุ: ค่าลบไม่ได้รับอนุญาต |
| sepia( % ) | แปลงภาพเพื่อซีเปีย 0% (0) เป็นค่าเริ่มต้นและแสดงภาพต้นฉบับ 100% จะทำให้ภาพซีเปียสมบูรณ์ หมายเหตุ: ค่าลบไม่ได้รับอนุญาต |
รายละเอียดทางเทคนิค
| CSS รุ่น | CSS3 |
|---|
หน้าเว็บที่เกี่ยวข้อง
อ้างอิง CSS: filter property
<สไตล์วัตถุ