ตัวอย่าง
เปลี่ยนสีของภาพทั้งหมดเป็นสีดำและสีขาว (100% gray) :
img {
-webkit-filter: grayscale(100%); /* Chrome, Safari,
Opera */
filter: grayscale(100%);
}
Original image
grayscale(100%)
เคล็ดลับ: อื่น ๆ "Try it Yourself" ตัวอย่างด้านล่าง
ความหมายและการใช้งาน
ตัวกรองคุณสมบัติกำหนดผลภาพ (like blur and saturation) เพื่อองค์ประกอบ (often <img>)
| ค่าเริ่มต้น: | ไม่มี |
|---|---|
| รับการถ่ายทอด: | no |
| Animatable: | yes. Read about animatable |
| เวอร์ชัน: | CSS3 |
| ไวยากรณ์ javascript: | object .style.WebkitFilter="grayscale(100%)" Try it |
สนับสนุนเบราว์เซอร์
ตัวเลขในตารางระบุราว์เซอร์รุ่นแรกที่สนับสนุนอย่างเต็มที่ทรัพย์สิน
ตามด้วยหมายเลข -webkit- ระบุรุ่นแรกที่ทำงานร่วมกับคำนำหน้า
| คุณสมบัติ | |||||
|---|---|---|---|---|---|
| filter | 18.0 -webkit- | 13.0 | 35.0 | 9.1 6.0 -webkit- | 15.0 -webkit- |
หมายเหตุ: รุ่นเก่าของ Internet Explorer (4.0 to 8.0) ได้รับการสนับสนุนที่ไม่ได้มาตรฐาน "filter" คุณสมบัติที่ได้รับการคัดค้าน นี้ส่วนใหญ่จะใช้สำหรับ ความทึบแสง เมื่อมีความจำเป็นการสนับสนุนจาก IE8 และลง
CSS ไวยากรณ์
filter:
none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate()
| invert() | opacity() | saturate() | sepia() | url();เคล็ดลับ: ในการใช้ฟิลเตอร์หลายแยกแต่ละตัวกรองด้วยช่องว่าง (See "More Examples" below)
ฟังก์ชั่นกรอง
หมายเหตุ: ตัวกรองที่ใช้ค่าร้อยละ (ie 75%) นอกจากนี้ยังยอมรับค่าเป็นทศนิยม (ie 0.75)
| กรอง | ลักษณะ | เล่น |
|---|---|---|
| none | ค่ามาตรฐาน ระบุไม่มีผล | เล่น " |
| blur( px ) | การใช้ผลการเบลอภาพ ค่าขนาดใหญ่จะสร้างเบลอมากขึ้น หากไม่มีการระบุค่าเป็น 0 ใช้ | เล่น " |
| brightness( % ) | ปรับความสว่างของภาพ 0% จะทำให้ภาพสีดำสนิท 100% (1) เป็นค่าเริ่มต้นและเป็นตัวแทนของภาพต้นฉบับ ค่าเกิน 100% จะให้ผลที่สดใส | เล่น " |
| contrast( % ) | ปรับความคมชัดของภาพ 0% จะทำให้ภาพสีดำสนิท 100% (1) เป็นค่าเริ่มต้นและเป็นตัวแทนของภาพต้นฉบับ ค่าเกิน 100% จะให้ผลลัพธ์ที่มีความคมชัดน้อย | เล่น " |
| drop-shadow( h-shadow v-shadow blur spread color ) | การใช้ผล Drop Shadow ไปยังภาพที่ ค่าที่เป็นไปได้: H-เงา - ที่จำเป็น ระบุค่าพิกเซลสำหรับเงาแนวนอน ค่าลบเงาวางทางด้านซ้ายของภาพ V-เงา - ที่จำเป็น ระบุค่าพิกเซลสำหรับเงาแนวตั้ง ค่าลบเงาวางด้านบนของภาพ เบลอ - เลือก นี้เป็นค่าที่สามและจะต้องอยู่ในพิกเซล เพิ่มผลเบลอให้เงา ค่าขนาดใหญ่จะสร้างเบลอมากขึ้น (เงาจะกลายเป็นใหญ่และมีน้ำหนักเบา) ค่าลบไม่ได้รับอนุญาต หากไม่มีการระบุค่าเป็น 0 ใช้ (ขอบเงาของคม) การแพร่กระจาย - เลือก นี้เป็นค่าที่สี่และต้องอยู่ในพิกเซล ค่าบวกจะทำให้เกิดเงาที่จะขยายและเติบโตใหญ่และค่าลบจะทำให้เกิดเงาจะหดตัวลง ถ้าไม่ระบุก็จะเป็น 0 (the shadow will be the same size as the element) หมายเหตุ: Chrome, Safari และ Opera และเบราเซอร์อื่นอาจจะไม่สนับสนุนความยาว 4 นี้ มันจะไม่ทำให้หากมีการเพิ่ม สี - เลือก เพิ่มสีให้เงา หากไม่มีการระบุสีขึ้นอยู่กับเบราว์เซอร์ (often black) ตัวอย่างของการสร้างเงาสีแดงซึ่งเป็น 8px ใหญ่ทั้งในแนวนอนและแนวตั้งที่มีผลกระทบเบลอ 10px: กรอง: หล่นเงา (8px 8px 10px สีแดง); เคล็ดลับ: ตัวกรองนี้จะคล้ายกับ กล่องเงา คุณสมบัติ | เล่น " |
| grayscale( % ) | แปลงภาพระดับสีเทา 0% (0) เป็นค่าเริ่มต้นและเป็นตัวแทนของภาพต้นฉบับ 100% จะทำให้ภาพสีเทาสมบูรณ์ (used for black and white images) หมายเหตุ: ค่าลบไม่ได้รับอนุญาต | เล่น " |
| hue-rotate( deg ) | นำไปใช้ในการหมุนเว้บนภาพ ค่าที่กำหนดจำนวนองศารอบวงกลมสีตัวอย่างภาพจะถูกปรับ 0deg เป็นค่าเริ่มต้นและแสดงภาพต้นฉบับ หมายเหตุ: ค่าสูงสุดคือ 360deg | เล่น " |
| invert( % ) | ตีความตัวอย่างในภาพ 0% (0) เป็นค่าเริ่มต้นและเป็นตัวแทนของภาพต้นฉบับ 100% จะทำให้ภาพ Inverted สมบูรณ์ หมายเหตุ: ค่าลบไม่ได้รับอนุญาต | เล่น " |
| opacity( % ) | ตั้งระดับความทึบแสงสำหรับภาพ ระดับความทึบอธิบายถึงความโปร่งใสในระดับที่: 0% มีความโปร่งใสอย่างสมบูรณ์ 100% (1) เป็นค่าเริ่มต้นและเป็นตัวแทนของภาพต้นฉบับ (no transparency) หมายเหตุ: ค่าลบไม่ได้รับอนุญาต เคล็ดลับ: ตัวกรองนี้จะคล้ายกับ ความทึบ คุณสมบัติ | เล่น " |
| saturate( % ) | อิ่มตัวภาพ 0% (0) จะทำให้ภาพสมบูรณ์ยกเลิกการอิ่มตัว 100% เป็นค่าเริ่มต้นและเป็นตัวแทนของภาพต้นฉบับ ค่าเกิน 100% ให้ผลซุปเปอร์อิ่มตัว หมายเหตุ: ค่าลบไม่ได้รับอนุญาต | เล่น " |
| sepia( % ) | แปลงภาพเพื่อซีเปีย 0% (0) เป็นค่าเริ่มต้นและเป็นตัวแทนของภาพต้นฉบับ 100% จะทำให้ภาพซีเปียสมบูรณ์ หมายเหตุ: ค่าลบไม่ได้รับอนุญาต | เล่น " |
| url() | url() ฟังก์ชั่นใช้เวลาสถานที่ตั้งของไฟล์ XML ที่ระบุตัวกรอง SVG และอาจรวมถึงการยึดกับองค์ประกอบกรองที่เฉพาะเจาะจง ตัวอย่าง: กรอง: url(svg-url#element-id) | |
| initial | การตั้งค่าคุณสมบัตินี้เป็นค่าเริ่มต้น อ่านเกี่ยวกับการเริ่มต้น | |
| inherit | สืบทอดคุณสมบัตินี้จากองค์ประกอบหลักของมัน อ่านเกี่ยวกับการรับมรดก |
ตัวอย่างเพิ่มเติม
ตัวอย่างเบลอ
ใช้ผลการเบลอภาพ:
img {
-webkit-filter: blur(5px); /* Chrome, Safari,
Opera */
filter: blur(5px);
}
Original image
blur(5px)
ตัวอย่างความสว่าง
ปรับความสว่างของภาพ:
img {
-webkit-filter: brightness(200%); /* Chrome, Safari,
Opera */
filter: brightness(200%);
}
Original image
brightness(200%)
คมชัดตัวอย่าง
ปรับความคมชัดของภาพ:
img {
-webkit-filter: contrast(200%); /* Chrome, Safari,
Opera */
filter: contrast(200%);
}
Original image
contrast(200%)
Drop ตัวอย่างเงา
สมัครผล Drop Shadow ไปยังภาพที่:
img {
-webkit-filter: drop-shadow(8px 8px 10px red); /* Chrome, Safari,
Opera */
filter: drop-shadow(8px 8px 10px red);
}
Original image
drop-shadow(8px 8px 10px red)
ตัวอย่างโทนสีเทา
แปลงภาพระดับสีเทา:
img {
-webkit-filter: grayscale(50%); /* Chrome, Safari,
Opera */
filter: grayscale(50%);
}
Original image
grayscale(50%)
เว้ตัวอย่างการหมุน
ใช้การหมุนเว้บนภาพ:
img {
-webkit-filter: hue-rotate(90deg); /* Chrome, Safari,
Opera */
filter: hue-rotate(90deg);
}
Original image
hue-rotate(90deg)
ตัวอย่าง Invert
กลับตัวอย่างในภาพ:
img {
-webkit-filter: invert(100%); /* Chrome, Safari,
Opera */
filter: invert(100%);
}
Original image
invert(100%)
ตัวอย่างความทึบ
ตั้งค่าระดับความทึบแสงสำหรับภาพ:
img {
-webkit-filter: opacity(30%); /* Chrome, Safari,
Opera */
filter: opacity(30%);
}
Original image
opacity(30%)
ตัวอย่างชุ่ม
เปียกโชกภาพ:
img {
-webkit-filter: saturate(800%); /* Chrome, Safari,
Opera */
filter: saturate(800%);
}
Original image
saturate(800%)
ตัวอย่างสีซีเปีย
แปลงภาพเพื่อซีเปีย:
img {
-webkit-filter: sepia(100%); /* Chrome, Safari,
Opera */
filter: sepia(100%);
}
Original image
sepia(100%)
การรวมตัวกรอง / กรองหลาย
หากต้องการใช้ตัวกรองหลายแยกแต่ละกรองที่มีช่องว่าง
หมายเหตุ: การสั่งซื้อสินค้าเป็นสิ่งสำคัญ (ie using grayscale() หลังจากที่ sepia() จะส่งผลให้ภาพสีเทาสมบูรณ์)
img {
-webkit-filter: contrast(200%) brightness(150%); /* Chrome, Safari,
Opera */
filter: contrast(200%) brightness(150%);
}
Original image
contrast(200%) brightness(150%)
ตัวกรองทั้งหมด
การสาธิตการทำงานของตัวกรองทั้งหมด:
.blur {
-webkit-filter: blur(4px);
filter: blur(4px);
}
.brightness {
-webkit-filter:
brightness(0.30);
filter: brightness(0.30);
}
.contrast {
-webkit-filter:
contrast(180%);
filter: contrast(180%);
}
.grayscale {
-webkit-filter:
grayscale(100%);
filter: grayscale(100%);
}
.huerotate {
-webkit-filter:
hue-rotate(180deg);
filter: hue-rotate(180deg);
}
.invert {
-webkit-filter:
invert(100%);
filter: invert(100%);
}
.opacity {
-webkit-filter:
opacity(50%);
filter: opacity(50%);
}
.saturate {
-webkit-filter:
saturate(7);
filter: saturate(7);
}
.sepia {
-webkit-filter:
sepia(100%);
filter: sepia(100%);
}
.shadow {
-webkit-filter:
drop-shadow(8px 8px 10px green);
filter: drop-shadow(8px 8px 10px green);
} ลองตัวเอง» หน้าเว็บที่เกี่ยวข้อง
อ้างอิง HTML DOM: filter property