# การเปลี่ยนเว็บเป็นสีขาวดำ เพื่อ ร่วมไว้อาลัย ด้วยโค้ด 1 บรรทัด
> เปลี่ยนเว็บไซต์ของคุณให้เป็นโหมดไว้อาลัยได้ภายใน 1 บรรทัด ด้วยโค้ด CSS ขาวดำแบบง่าย เพื่อแสดงความเคารพและร่วมไว้อาลัยอย่างสง่างาม เหมาะกับทุกเว็บไซต์และองค์กร จาก Topvery.com
Full URL: https://www.topvery.com/blog/article.การเปลี่ยนเว็บเป็นสีขาวดำเพื่อร่วมไว้อาลัยด้วยโค้ด1บรรทัด.BLO251025132128.ข่าวสาร
Base URL: https://www.topvery.com/
---
## วิธีเปลี่ยนสีเว็บไซต์เป็นขาวดำด้วยโค้ด 1 บรรทัด เพื่อร่วมไว้อาลัย
**สรุปสั้น ๆ ก่อนเริ่ม:** ถ้าคุณต้องการทำให้ทั้งหน้าเว็บกลายเป็น “โหมดไว้อาลัย” (โทนขาวดำ) อย่างเร็วที่สุด ให้ใส่เพียงบรรทัดเดียวต่อไปนี้ในหน้าเว็บของคุณ
โค้ดนี้จะเปลี่ยนผลลัพธ์การแสดงผลทั้งหน้าให้เป็นขาวดำทันที รวมถึงรูปภาพ วิดีโอ พื้นหลัง และองค์ประกอบเกือบทั้งหมด เหมาะมากสำหรับองค์กร/เว็บไซต์ข่าวที่ต้องการแสดงความอาลัยอย่างสุภาพและรวดเร็ว โดยไม่ต้องแก้ไขรูปหรือปรับแต่งไฟล์จำนวนมาก
### วัตถุประสงค์และกรณีใช้งาน
* **แสดงความอาลัย** ในช่วงเหตุการณ์สำคัญระดับประเทศ/องค์กร
### วางโค้ดตรงไหนดีที่สุด
* **วิธีที่ง่ายสุด:** วางภายในไฟล์ HTML หน้าแรก (เช่น index.html) ก่อนปิดแท็ก หรือในส่วนต้นของ
* **วิธีที่เป็นระบบ:** ใส่ในไฟล์สไตล์หลัก (เช่น styles.css) เพื่อควบคุมจากส่วนกลาง
### เปิด–ปิดโหมดไว้อาลัยแบบคลิกสลับ (แนะนำให้มี)
บางองค์กรต้องการให้ผู้ใช้ “เลือก” ได้ว่าจะดูโหมดปกติหรือไว้อาลัย เราสามารถทำปุ่มสลับง่าย ๆ ได้ดังนี้
แนวทางนี้ช่วยให้ผู้ใช้เข้าถึงคอนเทนต์ได้ตามความต้องการ และฝ่ายคอนเทนต์/มาร์เก็ตติ้งสามารถเปิดโหมดไว้อาลัยทั้งไซต์ได้ทันทีเมื่อจำเป็น
### เว้นบางรูป “ไม่ให้เป็นขาวดำ” ทำยังไง (สำคัญมาก)
**หลักการ:** ถ้าใส่ฟิลเตอร์ไว้บนพาเรนต์สูงสุดอย่าง html ผลจะครอบคลุมทั้งหน้า การใส่ filter: none แก้ที่ลูก (เช่น ![]()
) จะไม่ล้างผลของพาเรนต์ เพราะฟิลเตอร์ทำงานกับ “ผลเรนเดอร์รวม” ของพาเรนต์อยู่แล้ว
**วิธีที่ถูกต้อง (ปลอดภัยสุด):** ไม่ใส่ฟิลเตอร์ที่ html แต่สร้างคอนเทนเนอร์เฉพาะส่วนที่อยากให้ขาวดำ เช่น .mourning แล้ววางรูปหรือบล็อกที่ต้องคงสี “อยู่นอก” คอนเทนเนอร์นี้
...
**ถ้าปรับโครงสร้าง DOM ไม่สะดวก:** ใช้การกำหนดฟิลเตอร์แบบ “คัดเลือกองค์ประกอบ” (ข้อจำกัดคืออาจหลุดบางกรณี)
ทิป: ถ้าต้อง “ซ้อน” รูปคงสีไว้เหนือส่วนที่เป็นขาวดำ ให้ใช้เลย์เอาต์แบบซ้อนเลเยอร์ (เช่น position:absolute) ในคอนเทนเนอร์ที่ไม่ได้ติดฟิลเตอร์
### เฉพาะบางหน้า/บางส่วนเท่านั้น (สำหรับเว็บใหญ่)
* **โหมดทั้งไซต์** – ใส่/ลบคลาส .mourning บน ด้วยสคริปต์ส่วนกลาง
* **เฉพาะบางเพจ** – ใส่คลาสบน เมื่อเราทราบว่าเพจนั้นต้องเป็นข่าวดำ เช่น
* **เฉพาะบางบล็อก** – ครอบเฉพาะบล็อกด้วย .mourning เพื่อไม่กระทบทั้งหน้า
### การเข้าถึง (Accessibility) และภาพลักษณ์แบรนด์
* **คอนทราสต์:** ขาวดำไม่ได้แปลว่าจะอ่านง่ายเสมอ ตรวจสอบอัตราคอนทราสต์ตัวอักษรกับพื้นหลังเสมอ
* **ไอคอน/กราฟ:** ถ้ากราฟใช้สีสื่อความหมาย ให้เพิ่มลวดลาย/สัญลักษณ์เพื่อทดแทนสี
* **โลโก้:** หากโลโก้ต้อง “คงสี” ให้จัดวางโลโก้นอกโซนที่ติดฟิลเตอร์ตามแนวทางด้านบน
### ประสิทธิภาพและความเข้ากันได้
* **ประสิทธิภาพ:** ฟิลเตอร์ระดับทั้งหน้าอาจทำให้เครื่องรุ่นเก่า/มือถือกินพลังงานเพิ่มเล็กน้อย
* **เบราว์เซอร์หลัก:** สมัยใหม่รองรับดีทั้ง Chrome, Edge, Firefox, Safari
* **องค์ประกอบพิเศษ:** วิดีโอ/แคนวาส/ไอเฟรมมักถูกฟิลเตอร์ด้วย แต่ถ้าเป็นไอเฟรมข้ามโดเมน บางกรณีอาจขึ้นกับการเรนเดอร์ของเบราว์เซอร์
### ตรวจสอบก่อนปล่อยจริง (Checklist)
* อ่านออกชัดในโทนขาวดำทุกหน้าจอ (เดสก์ท็อป/มือถือ)
* โลโก้/รูปพิเศษที่ต้องคงสี แสดงสีถูกต้อง
* กราฟ/อินโฟกราฟิกยังสื่อสารได้แม้ไม่มีสี
* ปุ่ม/ลิงก์ยังมองเห็นและเข้าถึงได้ง่าย
* มีทางสลับกลับโหมดปกติ (เช่น ปุ่ม Toggle หรือกำหนดระยะเวลา)
### คำถามที่พบบ่อย (FAQ)
**เปิดโหมดไว้อาลัยเฉพาะบางวันอัตโนมัติได้ไหม?**ได้ ใช้สคริปต์เช็ควันที่/ช่วงเวลา แล้วสลับคลาสบน ได้ เช่น .mourning
**รูปในแกลเลอรีบางภาพอยากคงสี บางภาพอยากขาวดำ ทำได้หรือไม่?**ได้ สร้างคลาส .keep-color ให้รูปที่ต้องคงสี และปรับเลย์เอาต์ตามแนวทาง “แยกคอนเทนเนอร์” ด้านบน
**ถ้าธีมใช้ตัวปรับสี (Color Filters) เดิมอยู่แล้ว จะชนกันไหม?**อาจชนได้ แนะนำให้รวมกฎฟิลเตอร์ไว้จุดเดียว หรือใช้คลาสสถานะเดียวเป็นตัวควบคุม เช่น .mourning เพื่อเลี่ยงกฎซ้อน
### สรุป
ถ้าต้องการ “เร็วและเรียบง่าย” ใช้ html { filter: grayscale(1); } ได้เลย แต่หากต้อง “เว้นสีให้บางส่วน” ควรใช้แนวทาง “แยกคอนเทนเนอร์” (.mourning) และย้ายองค์ประกอบที่ต้องคงสีออกมานอกพื้นที่ที่ติดฟิลเตอร์ จะได้ผลแม่นยำและปรับแต่งในอนาคตได้ง่ายกว่า
**ตัวอย่างการใช้งานจริงในเว็บไซต์ **[**TopVery**](http://topvery.com)
