home

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

การผสมผสานพื้นหลังหลายชั้นด้วย CSS background-blend-mode

ใช้คุณสมบัติ background-blend-mode เพื่อกำหนดโหมดการผสมผสาน (blending mode) ของแต่ละชั้นพื้นหลังใน CSS สามารถทดลองรันโค้ดตัวอย่างด้านล่างได้

ตัวอย่างโค้ด

<!DOCTYPE html> <html>    <head>       <style>          #myDIV {             width: 250px;             height: 170px;             background-repeat: no-repeat, repeat;             background-image:url("https://www.tutorialspoint.com/assets/videotutorials/courses/3d_animation_online_training/380_course_211_image.jpg"),url( https://www.tutorialspoint.com/latest/dc.js.png);             background-blend-mode: darken;          }       </style>    </head>    <body>       <h1>Set Blend Mode</h1>       <div id = "myDIV"></div>    </body> </html>

คำอธิบาย

ตัวอย่างนี้ใช้ background-blend-mode: darken ซึ่งจะเปรียบเทียบค่าสีของพื้นหลัง 2 ชั้น และแสดงสีที่มืดกว่าในแต่ละพิกเซล คุณสมบัตินี้ทำงานร่วมกับ background-image หลายภาพที่คั่นด้วยคอมม่า

โหมดการผสมผสานยอดนิยม:

  • multiply - คูณค่าสี ทำให้มืดลง (เหมือนซ้อนฟิล์ม)
  • screen - คูณค่าสีผกผัน ทำให้สว่างขึ้น
  • overlay - รวม multiply และ screen
  • darken / lighten - เลือกสีมืด/สว่างกว่า
  • color-dodge / color-burn - ปรับความสว่าง/มืดอย่างดรามาติก
  • difference / exclusion - ความต่างของค่าสี