ปรับหน้าเว็บเป็นขาวดําด้วย css

15 Oct 2016

Share to:

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

วิธีปรับเปลี่ยนการแสดงผลหน้าเว็บเป็นขาวดํา

เนื่องจากเราต้องการปรับเปลี่ยนหน้าเว็บทั้งเว็บเป็นขาวดํา (Grayscale) เราต้องเขียน css เพิ่มเติมตรง tag body ดังนี้

body {
  /* IE */
  filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
  /* Chrome, Safari */
  -webkit-filter: grayscale(1);
  /* Firefox */
  filter: grayscale(1);
}

เลข 1 หมายถึง ปรับเป็น grayscale 100% สามารถเปลี่ยนเป็นค่าอื่นๆได้ เช่น 85%, 50%, 90% ฯลฯ ตัวอย่าง

body {
  /* IE */
  filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=85%);
  /* Chrome, Safari */
  -webkit-filter: grayscale(85%);
  /* Firefox */
  filter: grayscale(85%);
}

ถ้าต้องการจะเปลี่ยนเฉพาะบางจุด ก็สามารถทําเป็น class ไว้ก็ได้ครับ

ข้าพระพุทธเจ้าเว็บไซต์ ThitiBlog.com ขอน้อมส่งเสด็จสู่สวรรคาลัย


Copyright © 2019 - 2024 thiti.dev |  v1.19.0 |  Privacy policy |  status | 

            วงแหวนเว็บ