การปรับภาพด้วย CSS Filter Effects

การปรับภาพ ความสว่าง และ ความแตกต่าง, หรือเปลี่ยนภาพเป็น โทนสีเทา หรือ Sephia เป็นคุณสมบัติทั่วไปที่คุณอาจพบในแอปพลิเคชั่นแก้ไขภาพเช่น Photoshop. แต่ตอนนี้มันเป็นไปได้ที่จะเพิ่มเอฟเฟ็กต์เดียวกันกับภาพบนเว็บโดยใช้ CSS.

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

ดังนั้นเรามาลองดูและเราจะใช้ภาพนี้จากเมห์ขะเพื่อสาธิตผลกระทบ.

ผลกระทบ

การใช้เอฟเฟกต์นั้นง่ายมาก ดูตัวอย่างด้านล่างเพื่อเปลี่ยนภาพเป็น โทนสีเทา;

 img -webkit-filter: โทนสีเทา (100%);  

... และนี่คือสำหรับ ซีเปีย ala Instagram.

 img -webkit-filter: ซีเปีย (100%);  

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

การปรับความสว่างของภาพก็เป็นไปได้และเราสามารถทำได้โดยใช้ ความสว่าง ฟังก์ชั่นดังต่อไปนี้;

 img -webkit-filter: ความสว่าง (50%);  

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

ผลความสว่างยัง อนุญาตสำหรับค่าลบ, ซึ่งมันจะ ทำให้ภาพมืดลง.

 img -webkit-filter: ความสว่าง (-50%);  

…และเราสามารถปรับความคมชัดของภาพด้วยวิธีนี้.

 img -webkit-filter: ความคมชัด (200%);  

มีความแตกต่างเล็กน้อยเกี่ยวกับวิธีการทำงานของค่าเช่นเดียวกับที่คุณเห็นในข้างต้นเราตั้งค่า ความคมชัด () โดย 200%, นี่เป็นเพราะคุณค่าของ 100% เป็นจุดเริ่มต้นที่ภาพจะยังคงไม่เปลี่ยนแปลง เมื่อค่าต่ำกว่า 100%, สมมุติว่า 50% ภาพจะมีความเปรียบต่างน้อยลง.

นอกจากนี้เรายังสามารถรวมเอฟเฟกต์ในหนึ่งบล็อกการประกาศเช่นในตัวอย่างด้านล่าง เราเปลี่ยนภาพให้เป็น โทนสีเทา และเพิ่ม ความแตกต่าง 50% ในเวลาเดียวกัน.

 img -webkit-filter: ความคมชัดระดับสีเทา (100%) (150%);  

ด้วยการรวมตัวกรองกับการเปลี่ยน CSS3 ทำให้เราสามารถสร้างความสง่างามได้ โฉบ ผล.

 img: โฮเวอร์ -webkit-filter: โทนสีเทา (0%);  img: โฮเวอร์ -webkit-filter: ซีเปีย (0%);  img: โฮเวอร์ -webkit-filter: ความสว่าง (0%);  img: โฮเวอร์ -webkit-filter: ความคมชัด (100%);  

สุดท้ายมีเอฟเฟกต์อีกหนึ่งอย่างที่เราสามารถลองได้ เกาส์เบลอ, ซึ่งจะทำให้องค์ประกอบเป้าหมายไม่ชัดเจน.

 img: โฮเวอร์ -webkit-filter: เบลอ (5px);  

เช่นเดียวกับใน Photoshop ค่าเบลอระบุไว้ในรัศมีพิกเซลและหากไม่ได้ระบุค่าไว้อย่างชัดเจน 0 จะถูกใช้เป็นค่าเริ่มต้นและภาพจะถูกปล่อยให้เป็นไปตามที่กำหนด.

ความคิดสุดท้าย

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

และแม้ว่าจะมีการพูดคุยกับรูปภาพในบทช่วยสอนนี้ แต่คุณสมบัติก็สามารถนำไปใช้กับองค์ประกอบใด ๆ ใน DOM ได้.

สุดท้ายคุณสามารถดูการสาธิตสดได้จากลิงค์ด้านล่างนี้ โปรดทราบว่าขณะนี้รองรับตัวกรองเท่านั้น Chrome 19 และเหนือ.

• การสาธิต
• แหล่งดาวน์โหลด