home

หน้าแรก
 Computer >> บทช่วยสอนคอมพิวเตอร์ >  >> การเขียนโปรแกรม >> CSS

วิธีสร้างภาพขาวดำโดยใช้ CSS

โดยการระบุค่าระดับสีเทาให้กับคุณสมบัติตัวกรองของ CSS เราสามารถสร้างภาพขาวดำได้ คุณสมบัติตัวกรองสามารถใช้เพื่อใช้เอฟเฟกต์พิเศษ เช่น เบลอ เงาตกกระทบกับรูปภาพ

ไวยากรณ์

ไวยากรณ์ของคุณสมบัติตัวกรอง CSS มีดังต่อไปนี้ -

Selector {
   filter: grayscale(100%);
   -webkit-filter: grayscale(100%);
}

ตัวอย่าง

ตัวอย่างต่อไปนี้แสดงคุณสมบัติของตัวกรอง CSS

<!DOCTYPE html>
<html>
   <head>
      <style>
         img {
            margin: 2%;
            border-radius: 25%;
         }
         img:nth-of-type(even) {
            filter: grayscale(100%);
            -webkit-filter: grayscale(100%);
         }
      </style>
   </head>
   <body>
      <img src="https://images.unsplash.com/photo-1611825715408-826f2b19c43f?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=200&ixlib=rb-1.2.1&q=80&w=200" alt="img from unsplash">
      <img src="https://images.unsplash.com/photo-1611825715408-826f2b19c43f?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=200&ixlib=rb-1.2.1&q=80&w=200" alt="img from unsplash">
   </body>
</html>

ซึ่งจะได้ผลลัพธ์ดังต่อไปนี้

วิธีสร้างภาพขาวดำโดยใช้ CSS

ตัวอย่าง

<!DOCTYPE html>
<html>
   <head>
      <style>
         img {
            margin: 2%;
         }
         img:nth-of-type(odd) {
            filter: grayscale(100%);
            -webkit-filter: grayscale(100%);
         }
      </style>
   </head>
   <body>
      <img src="https://images.unsplash.com/photo-1611781750917-8777ab68668a?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=256&ixlib=rb-1.2.1&q=80&w=256">
      <img src="https://images.unsplash.com/photo-1611781750917-8777ab68668a?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=256&ixlib=rb-1.2.1&q=80&w=256">
   </body>
</html>

ซึ่งจะได้ผลลัพธ์ดังต่อไปนี้

วิธีสร้างภาพขาวดำโดยใช้ CSS