ฟิลเตอร์

สมมติว่าคุณต้องสร้างองค์ประกอบที่มีเอฟเฟกต์กระจกฝ้าทึบแสงเล็กน้อยซึ่งวางอยู่ด้านบนของรูปภาพ ข้อความต้องเป็นข้อความสด ไม่ใช่รูปภาพ คุณจะทำอย่างไร

การใช้ฟิลเตอร์ CSS ร่วมกับ backdrop-filter ช่วยให้เราใส่เอฟเฟกต์และเบลอสิ่งที่ต้องการได้แบบเรียลไทม์ เบลอและความทึบเป็น 2 ฟิลเตอร์จากที่มีอยู่มากมาย มาดูกันคร่าวๆ ว่าฟิลเตอร์แต่ละแบบทำงานอย่างไรและวิธีใช้

พร็อพเพอร์ตี้ filter

Browser Support

  • Chrome: 53.
  • Edge: 12.
  • Firefox: 35.
  • Safari: 9.1.

Source

คุณใช้ตัวกรองต่อไปนี้อย่างน้อย 1 รายการเป็นค่าสำหรับ filter ได้ หากคุณใช้ตัวกรองไม่ถูกต้อง ตัวกรองที่เหลือที่กำหนดไว้สำหรับ filter จะไม่ทำงาน

blur

ซึ่งจะใช้การเบลอแบบ Gaussian และอาร์กิวเมนต์เดียวที่คุณส่งได้คือ radius ซึ่งก็คือระดับการเบลอ ซึ่งต้องเป็นหน่วยความยาว เช่น 10px ระบบไม่ยอมรับเปอร์เซ็นต์

.my-element {
    filter: blur(0.2em);
}

brightness

Browser Support

  • Chrome: 18.
  • Edge: 12.
  • Firefox: 35.
  • Safari: 6.

Source

หากต้องการเพิ่มความสว่างหรือลดความสว่างขององค์ประกอบ ให้ใช้ฟังก์ชันความสว่าง ค่าความสว่างจะแสดงเป็นเปอร์เซ็นต์ โดยรูปภาพที่ไม่มีการแก้ไขจะแสดงเป็นค่า 100% ค่า 0% จะเปลี่ยนรูปภาพเป็นสีดําสนิท ดังนั้นค่าระหว่าง 0% ถึง 100% จะทําให้รูปภาพสว่างน้อยลง ใช้ค่ามากกว่า 100% เพื่อเพิ่มความสว่าง

.my-element {
    filter: brightness(80%);
}

contrast

Browser Support

  • Chrome: 18.
  • Edge: 12.
  • Firefox: 35.
  • Safari: 6.

Source

ตั้งค่าระหว่าง 0% ถึง 100% เพื่อลดหรือเพิ่มคอนทราสต์ตามลำดับ

.my-element {
    filter: contrast(160%);
}

grayscale

Browser Support

  • Chrome: 18.
  • Edge: 12.
  • Firefox: 35.
  • Safari: 6.

Source

คุณสามารถใช้เอฟเฟกต์สีเทาทั้งหมดได้โดยใช้ 1 เป็นค่าสำหรับ grayscale() หรือ 0 เพื่อให้องค์ประกอบมีสีอิ่มตัวทั้งหมด นอกจากนี้ คุณยังใช้เปอร์เซ็นต์หรือค่าทศนิยมเพื่อใช้เอฟเฟกต์สีเทาบางส่วนได้ด้วย หากไม่ส่งอาร์กิวเมนต์ องค์ประกอบจะเป็นโทนสีเทาโดยสมบูรณ์ หากคุณส่งค่ามากกว่า 100% ระบบจะจำกัดค่าไว้ที่ 100%

.my-element {
    filter: grayscale(80%);
}

invert

Browser Support

  • Chrome: 18.
  • Edge: 12.
  • Firefox: 35.
  • Safari: 6.

Source

เช่นเดียวกับ grayscale คุณส่ง 1 หรือ 0 ไปยังฟังก์ชัน invert() เพื่อเปิดหรือปิดได้เช่นกัน เมื่อเปิดอยู่ สีขององค์ประกอบจะกลับเป็นค่าสีตรงข้ามโดยสมบูรณ์ นอกจากนี้ คุณยังใช้ค่าเปอร์เซ็นต์หรือทศนิยมเพื่อใช้การกลับสีเพียงบางส่วนได้ด้วย หากคุณไม่ได้ส่งอาร์กิวเมนต์ใดๆ ไปยังฟังก์ชัน invert() ระบบจะกลับองค์ประกอบทั้งหมด

.my-element {
    filter: invert(1);
}

opacity

Browser Support

  • Chrome: 18.
  • Edge: 12.
  • Firefox: 35.
  • Safari: 6.

Source

ตัวกรอง opacity() ทํางานเหมือนกับพร็อพเพอร์ตี้ opacity ซึ่งคุณสามารถส่งตัวเลขหรือเปอร์เซ็นต์เพื่อเพิ่มหรือลดระดับความทึบได้ หากไม่ส่งอาร์กิวเมนต์ องค์ประกอบจะแสดงอย่างเต็มรูปแบบ

.my-element {
    filter: opacity(0.3);
}

saturate

Browser Support

  • Chrome: 18.
  • Edge: 12.
  • Firefox: 35.
  • Safari: 6.

Source

ตัวกรองความอิ่มตัวคล้ายกับตัวกรอง brightness มากและยอมรับอาร์กิวเมนต์เดียวกัน ซึ่งก็คือตัวเลขหรือเปอร์เซ็นต์ saturate จะเพิ่มหรือลดความอิ่มตัวของสีแทนที่จะเพิ่มหรือลดความสว่าง

.my-element {
    filter: saturate(155%);
}

sepia

Browser Support

  • Chrome: 18.
  • Edge: 12.
  • Firefox: 35.
  • Safari: 6.

Source

คุณเพิ่มเอฟเฟกต์โทนสีซีเปียได้ด้วยตัวกรองนี้ซึ่งทำงานเหมือนกับ grayscale() โทนสีซีเปียเป็นเทคนิคการพิมพ์รูปภาพที่เปลี่ยนโทนสีดำเป็นโทนสีน้ำตาลเพื่อเพิ่มความอบอุ่น คุณสามารถส่งตัวเลขหรือเปอร์เซ็นต์เป็นอาร์กิวเมนต์สำหรับ sepia() ซึ่งจะเพิ่มหรือลดเอฟเฟกต์ การไม่ส่งอาร์กิวเมนต์จะเพิ่มเอฟเฟกต์ซีเปียแบบเต็ม (เทียบเท่ากับ sepia(100%))

.my-element {
    filter: sepia(70%);
}

hue-rotate

Browser Support

  • Chrome: 18.
  • Edge: 12.
  • Firefox: 35.
  • Safari: 6.

Source

คุณได้เรียนรู้เกี่ยวกับวิธีที่สีใน hsl อ้างอิงการหมุนของวงล้อสีในบทเรียนเกี่ยวกับสี และฟิลเตอร์นี้ทำงานในลักษณะที่คล้ายกัน หากคุณส่งผ่านมุม เช่น องศาหรือการหมุน ระบบจะเปลี่ยนสีขององค์ประกอบทั้งหมด โดยเปลี่ยนส่วนของวงล้อสีที่ใช้อ้างอิง หากไม่ส่งอาร์กิวเมนต์ ระบบจะไม่ดำเนินการใดๆ

.my-element {
    filter: hue-rotate(120deg);
}

drop-shadow

Browser Support

  • Chrome: 18.
  • Edge: 12.
  • Firefox: 35.
  • Safari: 6.

Source

คุณใช้เงาที่แนบไปกับเส้นโค้งได้เช่นเดียวกับในเครื่องมือออกแบบ เช่น Photoshop ด้วย drop-shadow ระบบจะใช้เงานี้กับมาสก์อัลฟ่า ซึ่งมีประโยชน์มากในการเพิ่มเงาให้กับรูปภาพที่ตัดออก ตัวกรอง drop-shadow จะใช้พารามิเตอร์เงาซึ่งมีค่าออฟเซ็ต-x, ออฟเซ็ต-y, เบลอ และสีที่คั่นด้วยเว้นวรรค ซึ่งเกือบจะเหมือนกับ box-shadow แต่ระบบไม่รองรับคีย์เวิร์ด inset และค่าการแพร่กระจาย

.my-element {
    filter: drop-shadow(5px 5px 10px orange);
}

ดูข้อมูลเพิ่มเติมเกี่ยวกับเงาประเภทต่างๆ ในโมดูลเงา

url

Browser Support

  • Chrome: 5.
  • Edge: 12.
  • Firefox: 3.
  • Safari: 6.

Source

ฟิลเตอร์ url ช่วยให้คุณใช้ฟิลเตอร์ SVG จากองค์ประกอบหรือไฟล์ SVG ที่ลิงก์ได้ คุณอ่านข้อมูลเพิ่มเติมเกี่ยวกับฟิลเตอร์ SVG ได้ที่นี่

ฟิลเตอร์ฉากหลัง

Browser Support

  • Chrome: 76.
  • Edge: 79.
  • Firefox: 103.
  • Safari: 18.

Source

พร็อพเพอร์ตี้ backdrop-filter ยอมรับค่าฟังก์ชันตัวกรองทั้งหมดเหมือนกับ filter ความแตกต่างระหว่าง backdrop-filter กับ filter คือพร็อพเพอร์ตี้ backdrop-filter จะใช้ตัวกรองกับพื้นหลังเท่านั้น ส่วนพร็อพเพอร์ตี้ filter จะใช้กับองค์ประกอบทั้งหมด

ตัวอย่างที่แสดงในช่วงต้นของบทนี้เป็นตัวอย่างที่สมบูรณ์แบบเนื่องจากคุณไม่ต้องการให้ข้อความเบลอ และไม่ควรต้องเพิ่มองค์ประกอบ HTML เพิ่มเติม ความสามารถในการใช้ฟิลเตอร์กับฉากหลังเท่านั้นทำให้การดำเนินการดังกล่าวเป็นไปได้

ทดสอบความเข้าใจ

ทดสอบความรู้เกี่ยวกับตัวกรอง

ฟังก์ชันตัวกรอง CSS รายการใดต่อไปนี้

invert()
multiply()
blur()
brightness()
flip()
grayscale()

CSS ใช้ฟิลเตอร์ SVG ได้ไหม

ใช่
ไม่ใช่