การแบ็คไลท์ของปุ่มในหน้าเว็บมักจะใช้สองภาพ เมื่อคุณวางเคอร์เซอร์ของเมาส์ไว้เหนือองค์ประกอบที่เกี่ยวข้องของเอกสาร (ลิงก์หรือปุ่ม) กิจกรรมจะถูกสร้างขึ้น ซึ่งตามคำแนะนำที่เขียนในภาษา CSS จะแจ้งให้เบราว์เซอร์เปลี่ยนภาพหนึ่งเป็นอีกภาพหนึ่ง เมื่อเลื่อนเคอร์เซอร์ของเมาส์ออกจากปุ่ม การแทนที่แบบย้อนกลับจะเกิดขึ้น
จำเป็น
ความรู้พื้นฐานของภาษา HTML และ CSS CSS
คำแนะนำ
ขั้นตอนที่ 1
มีหลายตัวเลือกสำหรับการใช้กลไกการเน้นสีดังกล่าว คุณสามารถใช้โค้ด HTML เดียวกันโดยเปลี่ยนเฉพาะคำอธิบายสไตล์ที่เกี่ยวข้องเท่านั้น รหัส HTML ของปุ่มอาจมีลักษณะดังนี้: ข้อความบนปุ่ม นี่คือตัวระบุขององค์ประกอบของหน้านี้ (id = "btnA") ที่จะแนบคำอธิบายลักษณะ
ขั้นตอนที่ 2
ในการใช้งานหนึ่งในตัวเลือก คุณต้องเตรียมรูปภาพสองภาพ โดยภาพหนึ่งจะแสดงปุ่มในสถานะไม่ใช้งาน และภาพที่สองมีไฟแบ็คไลท์ พวกเขาจะใช้เป็นภาพพื้นหลังของลิงค์ คำแนะนำ CSS สำหรับปุ่มนี้อาจมีลักษณะดังนี้:
# btnA, # btnA: เข้าชมแล้ว {
แสดง: บล็อก;
ความกว้าง: 50px;
ความสูง: 20px;
พื้นหลัง: url (btnA.gif) ไม่ซ้ำ;
เส้นขอบ: 0;
}
# btnA: โฮเวอร์ {
พื้นหลัง: url (btnA_hover.gif) ไม่ซ้ำ;
เส้นขอบ: 0;
}
ในบล็อกแรก ขนาดของรูปภาพที่แสดงปุ่มจะถูกระบุ (กว้าง: 50px; สูง: 20px;) คุณต้องแทนที่ด้วยขนาดของรูปภาพของคุณ ควรเปลี่ยนชื่อไฟล์ภาพในลักษณะเดียวกัน: btnA.
ขั้นตอนที่ 3
ทางเลือกหนึ่งคือการใส่ทั้งสองภาพเป็นภาพเดียว อาจอยู่เหนือกันหรืออยู่ติดกันก็ได้ นอกจากนี้ยังจะใช้เป็นพื้นหลังสำหรับลิงก์ เนื่องจากขนาดปุ่มระบุไว้ในคำอธิบายลักษณะปุ่ม สิ่งใดที่ไม่พอดีกับขนาดจะไม่ปรากฏให้เห็น ในกรณีนี้ คำแนะนำในคำอธิบาย CSS เมื่อวางเคอร์เซอร์ของเมาส์ ให้เลื่อนภาพพื้นหลังเพื่อให้พื้นที่ที่มีภาพของปุ่มที่ไฮไลต์อยู่ในเฟรม สำหรับตัวเลือกนี้ ต้องเปลี่ยนรหัสจากขั้นตอนก่อนหน้าดังนี้:
# btnA, # btnA: เข้าชมแล้ว {
แสดง: บล็อก;
ความกว้าง: 50px;
ความสูง: 20px;
พื้นหลัง: url (btnA.gif) ไม่ซ้ำ;
เส้นขอบ: 0;
}
# btnA: โฮเวอร์ {
พื้นหลัง: url (btnA.gif) ไม่ซ้ำ 21px;
เส้นขอบ: 0;
}
นี่ถือว่าคุณได้วางภาพไว้เหนืออีกภาพหนึ่ง (เน้นที่ด้านล่าง) และบันทึกลงในไฟล์ชื่อ btnA.gif"