คุณสมบัติภาพพื้นหลังช่วยให้คุณสามารถระบุภาพที่จะแสดงในพื้นหลัง มันสามารถใช้ร่วมกับสีพื้นหลังสีพื้นหลังดังนั้นหากภาพไม่ได้ทำซ้ำสีพื้นหลังจะเต็มไปด้วยสีพื้นหลังหากไม่สามารถครอบคลุมภาพได้ รหัสนั้นง่ายเพียงจำไว้ว่าเส้นทางนั้นสัมพันธ์กับสไตล์ชีทดังนั้นในรหัสต่อไปนี้รูปภาพและสไตล์ชีทอยู่ในไดเรกทอรีเดียวกัน
สำหรับรูปภาพก่อนอื่นเราคิดถึงภาพพื้นหลัง เพราะการตกแต่งหลายอย่างของเราประสบความสำเร็จด้วยภาพพื้นหลัง เนื่องจากเป็นกรณีนี้เริ่มต้นด้วยรูปภาพพื้นหลังการควบคุม CSS
คำจำกัดความและการใช้งานคุณสมบัติภาพพื้นหลังตั้งค่าภาพพื้นหลังสำหรับองค์ประกอบ
พื้นหลังขององค์ประกอบจะใช้ทุกมิติขององค์ประกอบรวมถึงขอบด้านในและเส้นขอบ แต่ไม่ใช่ขอบด้านนอก
โดยค่าเริ่มต้นภาพพื้นหลังจะอยู่ที่มุมซ้ายบนขององค์ประกอบและทำซ้ำในแนวนอนและแนวตั้ง
1. ภาพพื้นหลังควบคุม CSS:สำหรับหน้าเว็บเมื่อเราเริ่มออกแบบเราอาจไม่คิดมากเกี่ยวกับภาพพื้นหลังเพราะส่วนใหญ่ต้องออกแบบสีพื้นหลัง ฉันคิดว่ามันง่ายมากเพราะมันเหมือนกับเพลงเบื้องหน้าและความเร็วของการเปิดหน้าเว็บจะมีผลกระทบบางอย่าง อย่างไรก็ตามสำหรับเว็บไซต์ส่วนตัวทั่วไปหรือบล็อกส่วนตัวแน่นอนว่าเป็นสิ่งที่ขาดไม่ได้ที่จะแสดงบุคลิกของตนเอง แน่นอนไม่มีอะไรจะไม่สมบูรณ์แบบเกินไป มีสิ่งดีๆและสิ่งเลวร้าย นั่นคือเมื่อภาพไม่พร้อมใช้งาน แต่มี CSS เนื้อหาทดแทนจะไม่ปรากฏขึ้น ดังนั้นจึงไม่แนะนำให้ใช้ภาพพื้นหลัง CSS ในข้อความปุ่มนำทางหรือสถานการณ์ที่คล้ายกัน
มีคุณลักษณะ CSS มากมายที่ควบคุมภาพพื้นหลังและส่วนใหญ่จะใช้ตราบเท่าที่พวกเขาเกี่ยวข้องกับภาพ
(1) การนำเข้ารูปภาพพื้นหลัง:แน่นอนสิ่งที่ทุกคนคุ้นเคยมากที่สุดคือพื้นหลังและภาพพื้นหลัง
รหัสสำหรับการออกแบบภาพพื้นหลังสำหรับหน้าเว็บคือ:
ร่างกาย {พื้นหลัง: url (d:/images/04.jpg)}
หรือ
Body {background-image: url (d:/images/04.jpg)}
ด้วยวิธีนี้เราสามารถนำเข้ารูปภาพที่เราต้องการใช้เป็นพื้นหลังในหน้าเว็บ
(2) วิธีการแสดงภาพพื้นหลัง:แน่นอนว่าการใช้รหัสข้างต้นเพียงอย่างเดียวจะไม่สามารถแสดงเอฟเฟกต์ที่คุณต้องการได้ เพราะถ้าภาพมีขนาดเล็กมันจะปูกระเบื้องในลักษณะแบน หากมีขนาดใหญ่เพื่อแสดงแถบเลื่อนจะปรากฏขึ้นซึ่งไม่ดี ดังนั้นเราต้องใช้การทำซ้ำพื้นหลังเพื่อควบคุมการแสดงผล
มันคือค่า:
ทำซ้ำ: ค่าเริ่มต้น ภาพพื้นหลังกระเบื้องในแนวตั้งและทิศทางแนวนอน
ไม่ทำซ้ำ: ภาพพื้นหลังไม่ได้กระเบื้อง
ทำซ้ำ -X: ภาพพื้นหลังเป็นแนวนอนเท่านั้น
ทำซ้ำ -y: ภาพพื้นหลังถูกกระเบื้องในทิศทางแนวตั้งเท่านั้น
สำหรับรหัสฉันคิดว่าใครก็ตามที่รู้ CSS เล็กน้อยรู้ดังนี้
-
ร่างกาย {พื้นหลัง: url (d:/images/04.jpg); การตอบสนองพื้นหลัง: ไม่มีการทำซ้ำ}
ด้วยวิธีนี้จะแสดงที่ขนาดภาพเดิม
(3) การควบคุมขนาดของภาพพื้นหลัง:แต่คำถามคือถ้าภาพมีขนาดใหญ่เกินไป? สำหรับหน้าเว็บที่ดีควรใช้ภาพที่มีขนาดใหญ่เกินไป เหตุผลได้รับการกล่าวถึงข้างต้นซึ่งส่งผลต่อความเร็วในการเปิดหน้าเว็บ เราควรใช้ PS หรือดอกไม้ไฟเพื่อจัดการกับมัน แต่เนื่องจากฉันพูดถึงมันเราไม่กลัวที่จะใช้ CSS เพื่อควบคุมขนาดภาพ
ฉันคิดว่าหลายคนจะใช้รหัสต่อไปนี้ตามธรรมชาติ:
คัดลอกรหัส