โฮมเพจ » การเข้ารหัส » การปรับภาพด้วย CSS Filter Effects

    การปรับภาพด้วย 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 และเหนือ.

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