การใช้ CSS พร้อมรูปภาพ

จัดรูปแบบรูปภาพของคุณและใช้ภาพในรูปแบบต่างๆ

หลายคนใช้ CSS เพื่อปรับข้อความเปลี่ยนแบบอักษรสีขนาดและอื่น ๆ แต่สิ่งหนึ่งที่หลายคนมักลืมคือคุณสามารถใช้ CSS กับภาพได้เช่นกัน

การเปลี่ยนภาพตัวเอง

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

• เพิ่มเส้นขอบหรือเส้นขอบรอบภาพ
• ลบเส้นขอบสีรอบภาพที่เชื่อมโยง
• การปรับความกว้างและ / หรือความสูงของภาพ
• เพิ่มเงาหล่น
• หมุนภาพ
• เปลี่ยนสไตล์เมื่อภาพโผล่พ้น

การให้ภาพขอบเป็นสถานที่ที่เหมาะสำหรับการเริ่มต้น แต่คุณควรพิจารณามากกว่าขอบ - คิดเกี่ยวกับขอบทั้งหมดของภาพของคุณและปรับขอบและ padding เช่นกัน ภาพที่มีขอบสีดำบาง ๆ ดูดี แต่การเพิ่มช่องว่างระหว่างเส้นขอบกับภาพอาจดูดีขึ้น

img {
ขอบ: 1px สีดำทึบ
padding: 5px;
}

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

img> a {
ชายแดน: ไม่มี;
}

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

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

img {
ความกว้าง: 50%;
ความสูง: อัตโนมัติ;
}

CSS3 เสนอแนวทางแก้ไขปัญหานี้ด้วยคุณสมบัติใหม่ที่พอดีกับวัตถุและตำแหน่งของวัตถุ ด้วยคุณสมบัติเหล่านี้คุณจะสามารถกำหนดความสูงและความกว้างของภาพที่แน่นอนและควรควบคุมสัดส่วนภาพได้อย่างไร ซึ่งอาจสร้างผลกระทบจากกล่องจดหมายรอบ ๆ รูปภาพหรือการครอบตัดของคุณเพื่อให้ภาพมีขนาดที่เหมาะสม

แม้ว่าคุณสมบัติ CSS3 object-fit และ object-position ยังไม่ได้รับการสนับสนุนอย่างกว้างขวาง แต่ยังมีคุณสมบัติ CSS3 อื่น ๆ ที่ได้รับการสนับสนุนอย่างดีในเบราว์เซอร์ที่ทันสมัยที่สุดซึ่งคุณสามารถใช้แก้ไขภาพได้ สิ่งต่างๆเช่นเงาวางมุมกลมและการแปลงเพื่อหมุนเอียงหรือเลื่อนภาพของคุณทำงานได้ทุกรูปแบบในเบราว์เซอร์ที่ทันสมัยที่สุด จากนั้นคุณสามารถใช้การเปลี่ยนจาก CSS เพื่อทำให้ภาพเปลี่ยนไปเมื่อเลื่อนเมาส์ไปวางหรือคลิกหรือหลังจากผ่านช่วงเวลาหนึ่งแล้ว

การใช้รูปภาพเป็นพื้นหลัง

CSS ทำให้การสร้างพื้นหลังแฟนซีกับรูปภาพของคุณง่ายขึ้น

คุณสามารถเพิ่มพื้นหลังลงในทั้งหน้าหรือเฉพาะองค์ประกอบได้ ง่ายต่อการสร้างภาพพื้นหลังบนหน้าเว็บด้วยคุณสมบัติภาพพื้นหลัง:

ร่างกาย {
ภาพพื้นหลัง: url (background.jpg);
}

เปลี่ยนตัวเลือก body ให้เป็นองค์ประกอบเฉพาะบนหน้าเพื่อวางพื้นหลังไว้บนองค์ประกอบเพียงตัวเดียว

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

เขียน background-repeat: repeat-x; เพื่อกระเบื้องภาพในแนวนอนและพื้นหลังซ้ำ: repeat-y; กับกระเบื้องในแนวตั้ง และคุณสามารถวางตำแหน่งภาพพื้นหลังของคุณด้วยคุณสมบัติ background-position

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

HTML5 ช่วยให้รูปภาพสไตล์

องค์ประกอบ FIGURE ใน HTML5 ควรวางไว้รอบรูปภาพใด ๆ ที่สามารถยืนอยู่คนเดียวภายในเอกสาร วิธีหนึ่งที่จะคิดเกี่ยวกับเรื่องนี้คือถ้าภาพสามารถปรากฏในภาคผนวกแล้วมันควรจะอยู่ภายในองค์ประกอบ FIGURE จากนั้นคุณสามารถใช้องค์ประกอบนั้นและองค์ประกอบ FIGCAPTION เพื่อเพิ่มรูปแบบลงในภาพของคุณ