วิธีการหรี่รูปภาพใน CSS

การหรี่ภาพทำให้มองเห็นได้ยากขึ้น แต่นั่นอาจเป็นเพียงเอฟเฟกต์ที่คุณต้องการ ภาพสลัวมีความโดดเด่นน้อยกว่าบนหน้าเว็บและดึงดูดความสนใจน้อยกว่าวัตถุที่อยู่รอบ ๆ ตัวอย่างเช่นคุณอาจหรี่ภาพของชายหาดที่มีแดดจัดเพื่อดึงโฟกัสของผู้ใช้ไปยังเมนูด้านล่างภาพ คุณไม่จำเป็นต้องสร้างหลายภาพเพื่อสร้างเอฟเฟกต์การลดแสง Cascading Style Sheets หรือ CSS สามารถใช้เคล็ดลับนี้โดยใช้โค้ดไม่กี่บรรทัด

CSS

CSS เป็นภาษาที่ผู้ออกแบบไซต์ใช้เพื่อกำหนดลักษณะที่วัตถุจะดูบนหน้าเว็บ คุณลักษณะเหล่านี้เช่นสีและความทึบมีค่าตามที่แสดงในตัวอย่างต่อไปนี้: .redBorder {border-color: red; ชายแดนสไตล์: ของแข็ง;}

รหัสนี้สร้างคลาส CSS ชื่อ redBorder หากหนึ่งในแท็ก HTML img ของคุณอ้างอิงคลาสนี้ผู้เยี่ยมชมเว็บไซต์จะเห็นเส้นขอบสีแดงรอบ ๆ ภาพเมื่อดูบนหน้าเว็บของคุณ โค้ด HTML ที่อ้างอิงคลาสนี้มีลักษณะดังนี้และสามารถลบเส้นขอบสีแดงได้โดยลบการอ้างอิงคลาสในแท็ก img นี้:

CSS Opacity

ด้วยการเปลี่ยนความทึบของภาพโดยใช้ CSS ทำให้คุณหรี่ลง รหัสที่แสดงด้านล่างสร้างคลาสชื่อ opacity40 ซึ่งกำหนดค่าความทึบของ 40 เปอร์เซ็นต์: .opacity40 {filter: alpha (opacity = 40);

ความทึบ: 0.4; }

แอตทริบิวต์ตัวกรองของคลาสใช้ระดับความทึบระหว่าง 0 ถึง 100 และแอตทริบิวต์ความทึบนั้นมีระดับความทึบที่มีค่าอยู่ระหว่าง 0 ถึง 1 การใช้แอตทริบิวต์ทั้งสองทำให้มั่นใจได้ว่าเบราว์เซอร์ทั้งหมดสามารถเปลี่ยนความทึบของภาพได้ เพิ่มการอ้างอิงคลาสนี้ให้กับรูปภาพเพื่อทำให้สลัว คุณยังสามารถสร้างคลาสที่ชื่อว่า "opacity100" และตั้งค่าเพื่อให้ความทึบของภาพนั้นเป็น 100 เปอร์เซ็นต์ ชั้นนั้นจะทำให้ภาพขุ่น

ลดแสงโดยทางโปรแกรม

หน้าเว็บของคุณสามารถแสดงภาพที่มีสีจางเมื่อผู้ใช้เปิดหน้าเว็บหรือรหัสของคุณอาจทำให้ภาพมืดลงในภายหลังหลังจากที่โหลดหน้าเว็บ ในการทำให้ภาพมัวในตอนแรกให้ตั้งค่าความทึบของมันเป็นค่าที่ต่ำกว่าดังที่อธิบายไว้ก่อนหน้านี้ ในการหรี่ภาพเมื่อแอปพลิเคชันของคุณทำงานให้เปลี่ยนชื่อคลาสที่กำหนดความทึบของภาพดังที่แสดงในตัวอย่างด้านล่าง: var imageObject = document.getElementById ("image1"); imageObject.className = "opacity40";

รหัสนี้ซึ่งปรากฏในฟังก์ชัน JavaScript ได้รับการอ้างอิงถึงภาพและเปลี่ยนชื่อคลาสเป็น "opacity40" ผู้ใช้สามารถคลิกปุ่มที่เรียกใช้ฟังก์ชัน JavaScript หรือรหัสของคุณอาจเรียกได้ตลอดเวลา

การพิจารณา

ฟังก์ชัน JavaScript ของคุณต้องการค่า id ของรูปภาพที่คุณต้องการหรี่แสงหากคุณต้องการเปลี่ยนความทึบของมันแบบไดนามิก รหัสรูปภาพในตัวอย่างที่อธิบายไว้ก่อนหน้านี้คือ "image1" หากคุณมีภาพหลายภาพที่จะหรี่ให้พวกเขาค่า id ที่ไม่ซ้ำกันและส่งพวกเขาไปยังฟังก์ชั่นที่ดำเนินการเปลี่ยนแปลงความทึบ สร้างคลาส CSS ได้มากเท่าที่คุณต้องการซึ่งจะกำหนดระดับความทึบที่แตกต่างกัน จากนั้นคุณสามารถหรี่รูปภาพเป็นระดับใดก็ได้โดยเปลี่ยนการอ้างอิงคลาสในฟังก์ชัน JavaScript