ตัวกรองคุณสมบัติ CSS3 (Filter)
ตัวอย่าง
แก้ไขทุกสีภาพสีดำและสีขาว (100% สีเทา):
-webkit กรอง: สีเทา (100% ); / * Chrome, Safari, Opera * /
กรอง: สีเทา (100%);
}
ลอง»
ความหมายและการใช้งาน
แอตทริบิวต์กรองกำหนดองค์ประกอบ (ปกติ <img>) ผลภาพ (ตัวอย่างเช่น: ฟัซซี่และความอิ่มตัว)
| เริ่มต้น: | ไม่มีเลย |
|---|---|
| มรดก: | ไม่ |
| สนับสนุนภาพเคลื่อนไหว: | ใช่ รายละเอียดสามารถพบได้ใน CSS นิเมชั่น |
| เวอร์ชัน: | CSS3 |
| ไวยากรณ์ javascript: | วัตถุ .style.WebkitFilter = "สีเทา (100%)" ที่จะลอง >> |
สนับสนุนเบราว์เซอร์
ตัวเลขในตารางเป็นตัวแทนของเบราว์เซอร์ครั้งแรกเพื่อรองรับจำนวนวิธีรุ่น
ทันทีหลังจากที่หมายเลขสำหรับคำนำหน้าเบราว์เซอร์ที่ระบุ -webkit-
| คุณสมบัติ | |||||
|---|---|---|---|---|---|
| กรอง | 18.0 -webkit- | ไม่สนับสนุน | 35.0 | 6.0 -webkit- | 15.0 -webkit- |
หมายเหตุ: Explorer ในเบราว์เซอร์ที่เก่ากว่าทางอินเทอร์เน็ต (4.0-8.0) เพื่อสนับสนุนการที่ไม่ได้มาตรฐาน "กรอง" คุณสมบัติที่ถูกทิ้งร้าง IE8 และเบราว์เซอร์ก่อนหน้านี้มักจะใช้ ความทึบ คุณสมบัติ
CSS ไวยากรณ์
filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();
เคล็ดลับ: ใช้ช่องว่างเพื่อแยกตัวกรองหลาย
ฟังก์ชั่นกรอง
หมายเหตุ: ตัวกรองมักจะใช้ร้อยละ (เช่น: 75%) ของหลักสูตรนอกจากนี้ยังสามารถใช้ในการแสดงทศนิยม (เช่น: 0.75)
| กรอง | ลักษณะ |
|---|---|
| ไม่มีเลย | ค่าเริ่มต้นไม่มีผล |
| เบลอ (พิกเซล) | เกาส์เบลอไปที่การตั้งค่าภาพ "รัศมี" เพื่อตั้งค่าฟังก์ชั่นเสียนมาตรฐานเป็นที่น่าสงสารหรือจำนวนของพิกเซลบนหน้าจอเพื่อละลายร่วมกันเพื่อให้มากขึ้นค่าเบลอมากขึ้น ถ้าค่าไม่ได้ตั้งค่าเริ่มต้นคือ 0; พารามิเตอร์นี้สามารถตั้งค่าความยาว CSS แต่ไม่ยอมรับค่าร้อยละ |
| ความสว่าง (%) | การประยุกต์ใช้การคูณเชิงเส้นไปยังภาพที่จะทำให้มันดูสว่างหรือมืด หากมีค่าเป็น 0%, ภาพที่เป็นสีดำทั้งหมด ราคาเป็น 100% การเปลี่ยนแปลงในภาพไม่มี ค่าอื่น ๆ ที่สอดคล้องกับผลคูณเชิงเส้น มูลค่ากว่า 100% เป็นไปได้ภาพจะสว่างกว่าเดิม ถ้าค่าไม่ได้ตั้งค่าเริ่มต้นคือ 1 |
| ความคมชัด (%) | ปรับความคมชัดของภาพ คุ้มค่าคือ 0%, ภาพที่เป็นสีดำทั้งหมด ราคาเป็น 100% ภาพที่ไม่เปลี่ยนแปลง ค่าเกิน 100% ซึ่งหมายความว่าจะใช้ความคมชัดต่ำ ถ้าค่าไม่ได้ตั้งค่าเริ่มต้นคือ 1 |
| หล่นเงา (H-V เงา -shadow สีเบลอแพร่) | ตั้งค่าผลเงาให้กับภาพ เงามีการสังเคราะห์ในภาพด้านล่างอาจจะมีความคลุมเครือสีที่เฉพาะเจาะจงสามารถวาดหน้ากากรุ่นแผนภาพชดเชย ฟังก์ชั่นยอมรับ <เงา> ค่า (กำหนดไว้ในพื้นหลัง CSS3) การพิมพ์นอกจาก "แทรก" คำหลักที่ไม่ได้รับอนุญาต ฟังก์ชั่นที่มีอยู่กับกล่องเงาคุณสมบัติกล่องเงาคล้ายกันมากยกเว้นที่ผ่านการกรองเบราว์เซอร์บางอย่างสำหรับประสิทธิภาพที่ดีขึ้นให้เร่งฮาร์ดแวร์
|
| สีเทา (%) | แปลงภาพระดับสีเทา มันกำหนดค่าของอัตราส่วนการแปลง ค่าของ 100% เป็นสมบูรณ์แปลงเป็นภาพสีเทาค่าเป็น 0% ของภาพที่ไม่เปลี่ยนแปลง ค่าระหว่าง 0% และ 100% ผลคูณเป็นเส้นตรง ถ้าไม่ได้ตั้งค่าเริ่มต้นเป็น 0; |
| เว้หมุน (องศา) | ประยุกต์ใช้ในการหมุนภาพสีสัน "มุมมอง" ภาพมุมแหวนสีเป็นค่าปรับค่าที่ตั้งไว้ ราคา 0deg, ภาพที่เปลี่ยนได้ ถ้าค่าไม่ได้ตั้งค่าเริ่มต้นเป็น 0deg แม้ว่าจะไม่มีค่าสูงสุดที่เกินมูลค่าของเทียบเท่า 360deg ปริมณฑลอีกที่ |
| กลับ (%) | Inverting ภาพที่นำเข้า มันกำหนดค่าของอัตราส่วนการแปลง 100% ของมูลค่าจะกลับสมบูรณ์ ค่าเป็น 0% ภาพที่ไม่เปลี่ยนแปลง ค่าระหว่าง 0% และ 100% ผลคูณเป็นเส้นตรง ถ้าค่าไม่ได้ตั้งค่าเริ่มต้นคือ 0 |
| ความทึบแสง (%) | การศึกษาระดับปริญญาแปลงของความโปร่งใสของภาพ มันกำหนดค่าของอัตราส่วนการแปลง 0% มีความโปร่งใสอย่างสมบูรณ์และมีมูลค่า 100% ภาพที่ไม่เปลี่ยนแปลง ค่าระหว่าง 0% และ 100% เป็นผลคูณเชิงเส้นคูณด้วยจำนวนของกลุ่มตัวอย่างยังเทียบเท่ากับภาพ ถ้าค่าไม่ได้ตั้งค่าเริ่มต้นเป็น 1 ฟังก์ชั่นนี้จะคล้ายกับที่มีอยู่ในคุณสมบัติความทึบยกเว้นว่าผ่านการกรองเพื่อที่จะปรับปรุงประสิทธิภาพการทำงานของเบราว์เซอร์บางส่วนจะให้เร่งฮาร์ดแวร์ |
| เปียกโชก (%) | แปลงความอิ่มตัวของภาพ มันกำหนดค่าของอัตราส่วนการแปลง 0% จะไม่อิ่มตัวอย่างเต็มที่การเปลี่ยนแปลงในภาพไม่เป็น 100% ค่าอื่น ๆ ผลคูณเป็นเส้นตรง มากกว่า 100% ของมูลค่าที่ได้รับอนุญาตมีความอิ่มตัวสูง ถ้าค่าไม่ได้ตั้งค่าเริ่มต้นเป็น 1 |
| ซีเปีย (%) | แปลงภาพเพื่อซีเปีย มันกำหนดค่าของอัตราส่วนการแปลง ราคาของแท้ 100% มีทั้งสีน้ำตาลเข้มคือ 0% ของภาพที่ไม่เปลี่ยนแปลง ค่าระหว่าง 0% และ 100% ผลคูณเป็นเส้นตรง ถ้าไม่ได้ตั้งค่าเริ่มต้นเป็น 0; |
| URL () | ฟังก์ชั่นใช้เวลา URL ไฟล์ XML ซึ่งชุดกรอง SVG และอาจรวมถึงสมอระบุไส้กรองที่เฉพาะเจาะจง ตัวอย่างเช่น: filter: url(svg-url#element-id) |
| แรกเริ่ม | การตั้งค่าคุณสมบัติเป็นค่าเริ่มต้นโปรดดูที่: CSS คำหลักเบื้องต้น |
| สืบทอด | สถานที่แห่งนี้จะรับมาจากองค์ประกอบหลักที่คุณสามารถดู: CSS ที่สืบทอดคำหลัก |
ตัวอย่างเพิ่มเติม
ตัวอย่างเลือน
ภาพถ่ายเกาส์เบลอ:
-webkit กรอง: เบลอ (5px) ; / * Chrome, Safari, Opera * /
กรอง: เบลอ (5px);
}
ลอง»
อินสแตนซ์ฟังก์ชั่นความสว่าง
ให้ความสว่างภาพ:
-webkit กรอง: ความสว่าง (200% ); / * Chrome, Safari, Opera * /
กรอง: ความสว่าง (200%);
}
ลอง»
คมชัดอินสแตนซ์ฟังก์ชั่น
ปรับความคมชัดของภาพ:
-webkit กรอง: ความคมชัด (200% ); / * Chrome, Safari, Opera * /
กรอง: ความคมชัด (200%);
}
ลอง»
ตัวอย่างฟังก์ชั่นแบบเลื่อนเงา
ตั้งค่าผลเงาในภาพ:
-webkit กรอง: หล่นเงา ( 8px 8px 10px สีแดง); / * Chrome, Safari, Opera * /
กรอง: หล่นเงา (8px 8px 10px สีแดง);
}
ลอง»
ฟังก์ชั่นอินสแตนซ์โทนสีเทา
แปลงภาพระดับสีเทา:
-webkit กรอง: สีเทา (50% ); / * Chrome, Safari, Opera * /
กรอง: สีเทา (50%);
}
ลอง»
() ตัวอย่างฟังก์ชั่นเว้หมุน
การประยุกต์ใช้การหมุนเว้ไปยังภาพที่:
-webkit กรอง: ฮิวหมุน ( 90deg); / * Chrome, Safari, Opera * /
กรอง: ฮิวหมุน (90deg) ;
}
ลอง»
อินสแตนซ์ฟังก์ชั่นสลับ
Inverting ภาพที่นำเข้า:
-webkit กรอง: Invert (100% ); / * Chrome, Safari, Opera * /
กรอง: Invert (100%);
}
ลอง»
ความทึบอินสแตนซ์ฟังก์ชั่น
การศึกษาระดับปริญญาแปลงของความโปร่งใสของภาพ:
-webkit กรอง: ความทึบแสง (30% ); / * Chrome, Safari, Opera * /
กรอง: ความทึบแสง (30%);
}
ลอง»
เปียกโชกอินสแตนซ์ฟังก์ชั่น
แปลงความอิ่มตัวของสีภาพ:
-webkit กรอง: เปียกโชก (800% ); / * Chrome, Safari, Opera * /
กรอง: เปียกโชก (800%);
}
ลอง»
อินสแตนซ์ฟังก์ชั่นสีซีเปีย
แปลงภาพให้กับซีเปีย:
-webkit กรอง: ซีเปีย (100% ); / * Chrome, Safari, Opera * /
กรอง: ซีเปีย (100%);
}
ลอง»
ฟังก์ชั่นคอมโพสิต
การใช้ฟิลเตอร์หลายแต่ละกรองคั่นด้วยช่องว่าง
หมายเหตุ: เพื่อเป็นสิ่งสำคัญมาก (ตัวอย่างเช่นการใช้สีเทา () ก่อนที่จะใช้สีซีเปีย () จะผลิตภาพระดับสีเทาเสร็จสมบูรณ์)
-webkit กรอง: ความคมชัด (200% ) ความสว่าง (150%); / * Chrome, Safari, Opera * /
กรอง: ความคมชัด (200%) ความสว่าง (150%);
}
ลอง»
ตัวอย่างตัวกรองทั้งหมด
ตัวอย่างต่อไปนี้แสดงให้เห็นถึงวิธีการใช้ตัวกรอง:
-webkit กรอง: เบลอ (4px) ;
กรอง: เบลอ (4px);
}
.brightness {
-webkit กรอง: ความสว่าง (0.30) ;
กรอง: ความสว่าง (0.30);
}
.contrast {
-webkit กรอง: ความคมชัด (180% );
กรอง: ความคมชัด (180%);
}
.grayscale {
-webkit กรอง: สีเทา (100% );
กรอง: สีเทา (100%);
}
.huerotate {
-webkit กรอง: ฮิวหมุน ( 180deg);
กรอง: ฮิวหมุน (180deg) ;
}
.invert {
-webkit กรอง: Invert (100% );
กรอง: Invert (100%);
}
.opacity {
-webkit กรอง: ความทึบแสง (50% );
กรอง: ความทึบแสง (50%);
}
.saturate {
-webkit กรอง: เปียกโชก (7) ;
กรอง: เปียกโชก (7);
}
.sepia {
-webkit กรอง: ซีเปีย (100% );
กรอง: ซีเปีย (100%);
}
.shadow {
-webkit กรอง: หล่นเงา ( 8px 8px 10px สีเขียว);
กรอง: หล่นเงา (8px 8px 10px สีเขียว);
}
ลอง»
บทความที่เกี่ยวข้อง
HTML DOM อ้างอิง: สไตล์คุณลักษณะตัวกรอง