วิธีจัดตำแหน่งข้อความบนรูปภาพ

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

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

วิธีวางตำแหน่งข้อความเหนือรูปภาพ

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

มุมซ้ายบน

ตำแหน่งแรกของ ข้อความที่เราจะตั้งจะอยู่มุมซ้ายบนของภาพ ใช้ข้อมูลโค้ดต่อไปนี้

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

มุมล่างซ้าย

เพื่อวัตถุประสงค์ในการเพิ่มข้อความที่มุมล่างซ้ายของรูปภาพ ใช้โค้ดที่กล่าวถึงด้านล่าง

CSS: โค้ดที่เหลือเหมือนกัน อย่างไรก็ตาม เพื่อวางตำแหน่งข้อความที่มุมล่างซ้าย เราได้ตั้งค่าคุณสมบัติด้านล่างเป็น 3 % และเหลือคุณสมบัติเป็น 8% คุณสามารถเปลี่ยนค่าของคุณสมบัติเหล่านี้เพื่อทำความเข้าใจวิธีการทำงานเหล่านี้

กึ่งกลาง

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

มุมขวาบน

สิ่งที่เราเพิ่งทำไป วางข้อความไว้ที่มุมบนขวา คือ เราได้กำหนดคุณสมบัติด้านบนเป็น 2% และคุณสมบัติด้านขวาเป็น 10% นี่ไม่ใช่กฎที่ยากและรวดเร็ว ดังนั้น คุณสามารถเปลี่ยนค่าเหล่านี้ได้ตามความต้องการของคุณ

มุมขวาล่าง

อย่างที่คุณเห็นแล้วว่าโค้ดที่เหลือคือ เช่นเดียวกับในตัวอย่างก่อนหน้านี้ ต่างกันเพียงการวางข้อความที่มุมล่างขวา เราใช้คุณสมบัติด้านล่างและคุณสมบัติด้านขวา

คำถามที่พบบ่อย

ฉันจะเปลี่ยนตำแหน่งได้อย่างไร ของข้อความในรูปภาพหรือไม่

ด้วยคุณสมบัติตำแหน่ง CSS คุณสามารถกำหนดตำแหน่งที่ข้อความจะอยู่เหนือรูปภาพได้ คุณสามารถทำได้โดยใส่รูปภาพและข้อความใน”div”ใน HTML จากนั้น ทำให้ตำแหน่งของ div เป็น”ญาติ”และตำแหน่งของข้อความเป็น”สัมบูรณ์”องค์ประกอบแบบสัมบูรณ์จะวางตามตำแหน่งขององค์ประกอบหลัก (div)

ฉันจะวางข้อความบนรูปภาพที่ตอบสนองได้อย่างไร

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

ฉันจะระบุตำแหน่งข้อความใน CSS ได้อย่างไร

h1 { text-align: ศูนย์; } h2 { จัดข้อความ: ซ้าย; } h3 { จัดข้อความ: ขวา; … จัดตำแหน่งบรรทัดสุดท้ายของข้อความในองค์ประกอบ

สามรายการ: p.a { text-align-last: right; } p.b { text-align-last: กึ่งกลาง; } p.c { … ตั้งค่าการจัดแนวแนวตั้งของรูปภาพในข้อความ: img.a { แนวแนวตั้ง: ฐาน; } img.b { แนวตั้ง: ข้อความด้านบน; }