ความสามารถของภาษามาร์กอัป - HTML - และสไตล์ชีตแบบเรียงซ้อน - CSS - ช่วยให้คุณสามารถวางภาพหนึ่งภายในอีกภาพหนึ่งได้หลายวิธี แน่นอนว่าต้องใช้ทักษะบางอย่างในการจัดวางหน้าเว็บ และคุณต้องเลือกวิธีการเฉพาะตามรหัสที่มีอยู่ อย่างไรก็ตาม ในบางกรณี คุณสามารถทำได้โดยไม่ต้องแก้ไขซอร์สโค้ด
คำแนะนำ
ขั้นตอนที่ 1
มีวิธีใส่ภาพหนึ่งลงในอีกภาพหนึ่งโดยไม่มีการเปลี่ยนแปลงใดๆ ในหน้าของเว็บไซต์ ในการทำเช่นนี้ การแก้ไขภาพพื้นหลังที่จัดเก็บบนเซิร์ฟเวอร์ก็เพียงพอแล้ว - ใช้ตัวแก้ไขกราฟิกเพื่อวางภาพพื้นหน้า หากวิธีนี้ใช้ได้ผลสำหรับคุณ ให้เริ่มต้นด้วยการกำหนดตำแหน่งที่จัดเก็บและชื่อไฟล์รูปภาพพื้นหลัง ซึ่งสามารถทำได้โดยค้นหาในซอร์สโค้ดของหน้าหรือเปิดในแท็บแยกต่างหากและดูเส้นทางแบบเต็มในแถบที่อยู่ของเบราว์เซอร์
ขั้นตอนที่ 2
ใช้ตัวจัดการไฟล์ของระบบจัดการเนื้อหาหรือไคลเอนต์ FTP ดาวน์โหลดไฟล์ที่ต้องการลงในคอมพิวเตอร์ของคุณและเปิดในโปรแกรมแก้ไขกราฟิกใดก็ได้ ตัวอย่างเช่น ในแอปพลิเคชัน Paint ที่ติดตั้ง Windows
ขั้นตอนที่ 3
วางรูปภาพพื้นหน้าไว้บนพื้นหลัง - ใน Paint สำหรับสิ่งนี้ คุณต้องเลือกรายการ "แทรกจาก" จากรายการดรอปดาวน์ "แทรก" บนแท็บ "หน้าแรก" และค้นหาไฟล์ที่ต้องการในกล่องโต้ตอบที่เปิดขึ้น จากนั้นปรับตำแหน่งของภาพที่แทรกบนพื้นหลังที่มีอยู่ (ลากด้วยเมาส์) และบันทึกผลลัพธ์ (Ctrl + S)
ขั้นตอนที่ 4
โหลดรูปภาพที่แก้ไขแล้วเขียนทับรูปภาพเก่า ขั้นตอนนี้จะเสร็จสิ้น
ขั้นตอนที่ 5
วิธีการที่อธิบายไว้ไม่สะดวกในกรณีที่จำเป็นต้องเปลี่ยนรูปภาพที่แทรกเป็นครั้งคราว จากนั้นใช้ความสามารถของภาษา HTML - ตัวอย่างเช่น ทำให้ภาพพื้นหลังเป็นพื้นหลังขององค์ประกอบของหน้าที่จะวางภาพพื้นหน้า องค์ประกอบคอนเทนเนอร์ดังกล่าวสามารถพูดได้ว่าเป็นเลเยอร์ (div) ในการสร้างพื้นหลังรูปภาพขนาดใหญ่ คุณต้องใช้คำอธิบายสไตล์ - แอตทริบิวต์ style ของแท็ก div คอนเทนเนอร์เปล่าในโค้ด HTML อาจมีลักษณะดังนี้:
ในวงเล็บ ให้ระบุที่อยู่และชื่อของไฟล์รูปภาพพื้นหลังบนไซต์ของคุณ
ขั้นตอนที่ 6
สร้างแท็กรูปภาพพื้นหน้า (img) โดยใช้แอตทริบิวต์ style เดียวกันเพื่อกำหนดจำนวนช่องว่างภายในจากขอบของคอนเทนเนอร์พื้นหลัง ตัวอย่างเช่น:
ในที่นี้ แอตทริบิวต์ width และ height กำหนดขนาดของรูปภาพ และตัวเลขสี่ตัวหลัง padding จะระบุ padding เป็นพิกเซลจากขอบของคอนเทนเนอร์ โดยเริ่มจากด้านบน (50) และตามเข็มนาฬิกา (60 - ขวา 70 - ล่าง 80 - ซ้าย)
ขั้นตอนที่ 7
วางแท็ก img ในคอนเทนเนอร์:
ขั้นตอนที่ 8
เพิ่มบรรทัดที่สร้างขึ้นลงในซอร์สโค้ดของหน้า จากนั้นเปลี่ยนการเยื้อง ปรับตำแหน่งของภาพที่แทรกกับพื้นหลังของภาพพื้นหลัง