หลายคนใช้ CSS เพื่อปรับข้อความเปลี่ยนแบบอักษรสีขนาดและอื่น ๆ แต่สิ่งหนึ่งที่หลายคนมักลืมคือคุณสามารถใช้ CSS กับภาพได้เช่นกัน
การเปลี่ยนภาพตัวเอง
CSS ช่วยให้คุณสามารถปรับวิธีการแสดงภาพบนหน้าเว็บ นี่อาจเป็นประโยชน์สำหรับการรักษาหน้าเว็บของคุณให้สอดคล้องกัน โดยการกำหนดรูปแบบภาพทั้งหมดคุณจะสร้างรูปลักษณ์มาตรฐานสำหรับรูปภาพของคุณ บางสิ่งที่คุณสามารถทำได้:
- เพิ่มเส้นขอบหรือเส้นขอบรอบภาพ
- ลบเส้นขอบสีรอบภาพที่เชื่อมโยง
- การปรับความกว้างและ / หรือความสูงของภาพ
- เพิ่มเงาหล่น
- หมุนภาพ
- เปลี่ยนสไตล์เมื่อภาพโผล่พ้น
การให้ภาพขอบเป็นสถานที่ที่เหมาะสำหรับการเริ่มต้น แต่คุณควรพิจารณามากกว่าขอบ - คิดเกี่ยวกับขอบทั้งหมดของภาพของคุณและปรับขอบและ padding เช่นกัน ภาพที่มีขอบสีดำบาง ๆ ดูดี แต่การเพิ่มช่องว่างระหว่างเส้นขอบกับภาพอาจดูดีขึ้น
img { ขอบ: 1px สีดำทึบ padding: 5px;}
เมื่อใดก็ตามที่เป็นไปได้ควรเชื่อมโยงรูปภาพที่ไม่ใช่ภาพตกแต่งเสมอ แต่เมื่อทำโปรดจำไว้ว่าเบราว์เซอร์ส่วนใหญ่จะเพิ่มเส้นขอบสีรอบ ๆ ภาพ แม้ว่าคุณจะใช้โค้ดด้านบนเพื่อเปลี่ยนเส้นขอบการเชื่อมโยงจะเป็นการลบล้างเว้นแต่คุณจะลบหรือเปลี่ยนเส้นขอบในลิงก์ด้วย ในการดำเนินการนี้คุณควรใช้กฎลูกน้อยของ CSS เพื่อลบหรือเปลี่ยนเส้นขอบรอบรูปภาพที่เชื่อมโยง:
img> a { ชายแดน: ไม่มี;}
นอกจากนี้คุณยังสามารถใช้ CSS เพื่อเปลี่ยนหรือตั้งค่าความสูงและความกว้างของรูปภาพได้ แม้ว่าจะไม่ควรใช้เบราว์เซอร์เพื่อปรับขนาดภาพเนื่องจากความเร็วในการดาวน์โหลดจะดีขึ้นมากในการปรับขนาดภาพเพื่อให้ดูดี และด้วย CSS คุณสามารถตั้งค่าภาพของคุณให้เป็นความกว้างหรือความสูงมาตรฐานหรือแม้แต่กำหนดขนาดให้สัมพันธ์กับคอนเทนเนอร์
โปรดจำไว้ว่าเมื่อคุณปรับขนาดภาพเพื่อให้ได้ผลลัพธ์ที่ดีที่สุดคุณควรปรับขนาดเพียงหนึ่งมิติเท่านั้นคือความสูงหรือความกว้าง นี้จะ enusre ว่าภาพที่ช่วยให้อัตราส่วนของมันและเพื่อให้ดูไม่แปลก ตั้งค่าอื่น ๆ ไว้ที่ รถยนต์ หรือปล่อยให้แชนแนลบอกเบราว์เซอร์เพื่อรักษาสัดส่วนภาพให้คงที่
img { ความกว้าง: 50%; ความสูง: อัตโนมัติ;}
CSS3 เสนอวิธีแก้ไขปัญหานี้ด้วยคุณสมบัติใหม่ วัตถุพอดี และ วัตถุตำแหน่ง. ด้วยคุณสมบัติเหล่านี้คุณจะสามารถกำหนดความสูงและความกว้างของภาพที่แน่นอนและควรควบคุมสัดส่วนภาพได้อย่างไร ซึ่งอาจสร้างผลกระทบจากกล่องจดหมายรอบ ๆ รูปภาพหรือการครอบตัดของคุณเพื่อให้ภาพมีขนาดที่เหมาะสม
ในขณะที่ CSS3 วัตถุพอดี และ วัตถุตำแหน่ง ยังไม่ได้รับการสนับสนุนอย่างกว้างขวาง CSS3 คุณสมบัติอื่น ๆ ที่ได้รับการสนับสนุนอย่างดีในเบราว์เซอร์ที่ทันสมัยที่สุดซึ่งคุณสามารถใช้แก้ไขภาพได้ สิ่งต่างๆเช่นเงาวางมุมกลมและการแปลงเพื่อหมุนเอียงหรือเลื่อนภาพของคุณทำงานได้ทุกรูปแบบในเบราว์เซอร์ที่ทันสมัยที่สุด จากนั้นคุณสามารถใช้การเปลี่ยนจาก CSS เพื่อทำให้ภาพเปลี่ยนไปเมื่อเลื่อนเมาส์ไปวางหรือคลิกหรือหลังจากผ่านช่วงเวลาหนึ่งแล้ว
การใช้รูปภาพเป็นพื้นหลัง
CSS ทำให้การสร้างพื้นหลังแฟนซีกับรูปภาพของคุณง่ายขึ้น คุณสามารถเพิ่มพื้นหลังลงในทั้งหน้าหรือเฉพาะองค์ประกอบได้ ง่ายต่อการสร้างภาพพื้นหลังบนหน้าเว็บด้วยปุ่ม ภาพพื้นหลัง คุณสมบัติ:
ร่างกาย { ภาพพื้นหลัง: url (background.jpg);}
เปลี่ยน ร่างกาย selector ไปยังองค์ประกอบเฉพาะบนหน้าเพื่อวางพื้นหลังไว้บนองค์ประกอบเพียงตัวเดียว
อีกสิ่งที่สนุกที่คุณสามารถทำได้คือภาพพื้นหลังที่ไม่ได้เลื่อนไปกับส่วนที่เหลือของหน้าเว็บเช่นลายน้ำ คุณเพียงแค่ใช้สไตล์ พื้นหลังแนบ: ถาวร; พร้อมกับภาพพื้นหลังของคุณ ตัวเลือกอื่น ๆ สำหรับภูมิหลังของคุณรวมถึงการทำให้กระเบื้องเป็นแนวนอนหรือแนวตั้งด้วย พื้นหลังซ้ำ คุณสมบัติ เขียน พื้นหลังซ้ำ: repeat-x; เพื่อวางแนวภาพในแนวนอนและ background-repeat: repeat-y; กับกระเบื้องในแนวตั้ง คุณสามารถวางภาพพื้นหลังด้วย พื้นหลังตำแหน่ง คุณสมบัติ
และ CSS3 เพิ่มรูปแบบให้กับภูมิหลังของคุณอีกด้วย คุณสามารถยืดภาพให้พอดีกับพื้นหลังขนาดใดก็ได้หรือตั้งค่าภาพพื้นหลังให้มีขนาดตามขนาดของหน้าต่าง คุณสามารถเปลี่ยนตำแหน่งแล้วตัดภาพพื้นหลัง แต่สิ่งที่ดีที่สุดประการหนึ่งเกี่ยวกับ CSS3 คือตอนนี้คุณสามารถจัดวางภาพพื้นหลังหลายภาพเพื่อสร้างเอฟเฟ็กต์ที่ซับซ้อนมากยิ่งขึ้น
HTML5 ช่วยให้รูปภาพสไตล์
รูป องค์ประกอบใน HTML5 ควรอยู่รอบรูปภาพใด ๆ ที่สามารถยืนอยู่คนเดียวภายในเอกสาร วิธีหนึ่งที่จะคิดเกี่ยวกับเรื่องนี้คือถ้าภาพสามารถปรากฏในภาคผนวกแล้วมันควรจะอยู่ภายใน รูป ธาตุ. จากนั้นคุณสามารถใช้องค์ประกอบนั้นและ FIGCAPTION เพื่อเพิ่มรูปแบบให้กับรูปภาพของคุณ
