ปัจจุบัน เว็บไซต์ที่มีภาพพื้นหลังแบบตอบสนองเป็นที่ต้องการ เว็บไซต์แบบตอบสนองช่วยให้ผู้ใช้ได้รับประสบการณ์การใช้งานที่เหมาะสมบนอุปกรณ์เกือบทั้งหมด รวมถึงโทรศัพท์มือถือ แท็บเล็ต หรือเดสก์ท็อป ภาพที่ตอบสนองสามารถปรับพื้นหลังของเว็บไซต์ ขนาดหน้าจอ และขนาดได้ รูปภาพที่ตอบสนองช่วยให้มั่นใจได้ว่าจะรักษาคุณภาพและสัดส่วนเอาไว้ นอกจากนี้ เว็บไซต์ที่มีภาพพื้นหลังแบบตอบสนองยังโหลดได้รวดเร็วอีกด้วย
คู่มือนี้จะให้คำแนะนำในการปรับภาพพื้นหลังให้เข้ากับขนาดหน้าจอ
จะปรับภาพพื้นหลังให้เข้ากับขนาดหน้าจอได้อย่างไร
รูปภาพสามารถปรับให้เข้ากับขนาดหน้าจอได้โดยปฏิบัติตามคำแนะนำแบบขั้นตอนด้านล่าง
ขั้นตอนที่ 1: สร้างโครงสร้าง HTML
ขั้นแรก สร้างโครงสร้าง HTML และเพิ่มสไตล์ชีตภายนอกโดยใช้ <ลิงก์> แท็กในส่วนหัวของ HTML เพื่อจุดประสงค์นั้น เพียงวาง “ <ลิงค์ rel = “สไตล์ชีต” href = “style.css”> ” ภายในแท็กส่วนหัว “ ญาติ แท็ก ” ระบุความสัมพันธ์ของไฟล์กับเอกสาร HTML “ href แท็ก ” ระบุที่อยู่ไฟล์ CSS:
< html >
< ศีรษะ >
< ลิงค์ เรล = 'สไตล์ชีท' hr= 'style.css' >
< ชื่อ > ภาพพื้นหลังที่ตอบสนอง ชื่อ >
ศีรษะ >
< ร่างกาย >
-- พื้นที่สำหรับเพิ่มเนื้อหาอื่นๆ-- >
ร่างกาย >
html >
ขั้นตอนที่ 2: ใช้ CSS
ตอนนี้ใช้ CSS กับ “ ร่างกาย ' ส่วน. ขั้นแรก ระบุภาพพื้นหลัง เพื่อจุดประสงค์นั้น ให้ใช้เครื่องหมาย “ ภาพพื้นหลัง ” และระบุ “ URL() ” ค่าที่มีที่อยู่ไฟล์รูปภาพ
หลังจากนั้นให้ใช้เครื่องหมาย “ ภาพพื้นหลัง ” เพื่อระบุขนาดภาพ ” พื้นหลังซ้ำ ” คุณสมบัติในการตั้งค่าการทำซ้ำของรูปภาพ และ “ สิ่งที่แนบมากับพื้นหลัง ” เพื่อตั้งค่าว่าจะเลื่อนรูปภาพไปพร้อมกับส่วนที่เหลือของหน้าหรือไม่ สุดท้ายให้ตั้งค่า “ ระยะขอบ ' และ ' การขยายความ ' ถึง ' 0 ”:
ร่างกาย {ภาพพื้นหลัง: url ( 'ทดสอบ image.jpg' ) ;
ขนาดพื้นหลัง: 100 % 100 % ;
/* ปรับขนาดภาพเป็น 100 % ความกว้างและ 100 % ความสูง */
พื้นหลังซ้ำ: ไม่ซ้ำ;
สิ่งที่แนบมากับพื้นหลัง: แก้ไขแล้ว;
ระยะขอบ: 0 ;
การขยายความ: 0 ;
/* ทางเลือก: พื้นหลังคงที่ */
}
เอาท์พุต
นี่คือผลลัพธ์ก่อนที่จะทำสัญญาหน้าต่างเบราว์เซอร์:
หลังจากการย่อเบราว์เซอร์:
ผลลัพธ์ข้างต้นเป็นการยืนยันว่ารูปภาพได้ปรับพื้นหลังให้เข้ากับขนาดหน้าจอแล้ว
บทสรุป
หากต้องการปรับภาพพื้นหลังให้เข้ากับขนาดหน้าจอ ขั้นแรกให้รวม “ วิวพอร์ต ” ในส่วนหัวเพื่อควบคุมขนาดและการปรับขนาด จากนั้นสร้างโครงสร้าง HTML และใช้ CSS ใน CSS ให้ตั้งค่า “ ขนาดพื้นหลัง ” มูลค่าทรัพย์สินให้กับ “ ปิดบัง ” ค่าเพื่อปรับขนาดความสูงและความกว้างของรูปภาพ บทความนี้ได้นำเสนอคำแนะนำฉบับสมบูรณ์ในการปรับภาพพื้นหลังให้เข้ากับขนาดหน้าจอ