การหรี่ภาพทำให้มองเห็นได้ยากขึ้น แต่นั่นอาจเป็นเพียงผลกระทบที่คุณกำลังมองหา ภาพสลัวจะไม่โดดเด่นบนหน้าเว็บและดึงดูดความสนใจน้อยกว่าวัตถุที่อยู่รอบ ๆ คุณอาจหรี่ภาพของชายหาดที่มีแดดจ้าตัวอย่างเช่นเพื่อดึงโฟกัสของผู้ใช้ไปที่เมนูด้านล่างรูปภาพ คุณไม่จำเป็นต้องสร้างภาพหลายภาพเพื่อสร้างเอฟเฟกต์การลดแสงนี้ Cascading Style Sheets หรือ CSS สามารถใช้เคล็ดลับนี้ได้โดยใช้โค้ดไม่กี่บรรทัด
CSS
CSS เป็นภาษาที่นักออกแบบไซต์ใช้เพื่อกำหนดวิธีที่วัตถุดูบนหน้าเว็บ แอตทริบิวต์เหล่านี้เช่นสีและความทึบมีค่าตามที่แสดงในตัวอย่างต่อไปนี้: .redBorder {border-color: red; border-style: solid;}
โค้ดนี้สร้างคลาส CSS ชื่อ redBorder หากแท็ก HTML img รายการใดรายการหนึ่งของคุณอ้างถึงคลาสนี้ผู้เยี่ยมชมไซต์จะเห็นเส้นขอบสีแดงทึบรอบภาพเมื่อดูบนหน้าเว็บของคุณ โค้ด HTML ที่อ้างอิงคลาสนี้มีลักษณะดังนี้และสามารถลบขอบสีแดงได้โดยการลบการอ้างอิงคลาสในแท็ก img นี้:
ความทึบ CSS
การเปลี่ยนความทึบของภาพโดยใช้ CSS จะทำให้ภาพหรี่ลง โค้ดที่แสดงด้านล่างสร้างคลาสชื่อ opacity40 ที่กำหนดค่าความทึบ 40 เปอร์เซ็นต์: .opacity40 {filter: alpha (opacity = 40);
ความทึบ: 0.4; }
แอตทริบิวต์ตัวกรองของชั้นเรียนใช้มาตราส่วนความทึบระหว่าง 0 ถึง 100 และแอตทริบิวต์ความทึบมีระดับความทึบที่มีค่าตั้งแต่ 0 ถึง 1 การใช้แอตทริบิวต์ทั้งสองทำให้มั่นใจได้ว่าเบราว์เซอร์ทั้งหมดสามารถเปลี่ยนความทึบของรูปภาพของคุณได้ เพิ่มการอ้างอิงคลาสนี้ลงในรูปภาพเพื่อทำให้มืดลง คุณยังสามารถสร้างคลาสชื่อ "opacity100" และตั้งค่าเพื่อให้ความทึบของรูปภาพเป็น 100 เปอร์เซ็นต์ ชั้นนั้นจะทำให้ภาพทึบ
Dimming โดยทางโปรแกรม
หน้าเว็บของคุณสามารถแสดงภาพเป็นสีจางเมื่อผู้ใช้เปิดหน้านั้นหรือโค้ดของคุณอาจทำให้ภาพมืดลงในภายหลังหลังจากโหลดหน้าเว็บ ในการทำให้ภาพมืดลงในตอนแรกให้ตั้งค่าความทึบเป็นค่าที่ต่ำกว่าดังที่อธิบายไว้ก่อนหน้านี้ หากต้องการหรี่รูปภาพขณะที่แอปพลิเคชันของคุณทำงานให้เปลี่ยนชื่อคลาสที่กำหนดความทึบของรูปภาพดังที่แสดงในตัวอย่างด้านล่าง: var imageObject = document.getElementById ("image1"); imageObject.className = "ความทึบ 40";
โค้ดนี้ปรากฏภายในฟังก์ชัน JavaScript ได้รับการอ้างอิงไปยังรูปภาพและเปลี่ยนชื่อคลาสเป็น "opacity40" ผู้ใช้สามารถคลิกปุ่มที่เรียกใช้ฟังก์ชัน JavaScript หรือรหัสของคุณอาจเรียกว่าเมื่อใดก็ได้
ข้อควรพิจารณา
ฟังก์ชัน JavaScript ของคุณต้องการค่า id ของรูปภาพที่คุณต้องการหรี่หากคุณต้องการเปลี่ยนความทึบแบบไดนามิก รหัสรูปภาพในตัวอย่างที่อธิบายไว้ก่อนหน้านี้คือ "image1" หากคุณต้องการหรี่รูปภาพหลายภาพให้กำหนดค่า id ที่ไม่ซ้ำกันและส่งต่อไปยังฟังก์ชันที่ทำการเปลี่ยนแปลงความทึบ สร้างคลาส CSS ได้มากเท่าที่คุณต้องการซึ่งกำหนดระดับความทึบที่แตกต่างกัน จากนั้นคุณสามารถหรี่ภาพลงในระดับใดก็ได้โดยเปลี่ยนการอ้างอิงคลาสในฟังก์ชัน JavaScript