โพสต์นี้จะอธิบายวิธีการเพิ่มรูปภาพจาก URL โดยย่อ
วิธีเพิ่มรูปภาพจาก URL ใน HTML/CSS
ใน HTML/CSS มีสองวิธีในการเพิ่มรูปภาพโดยใช้ URL ซึ่งมีรายการด้านล่าง:
วิธีที่ 1: เพิ่มรูปภาพโดยใช้องค์ประกอบ ![]()
“ องค์ประกอบ ” เป็นองค์ประกอบโมฆะเดียวที่ไม่มีเนื้อหาย่อยและแท็กสิ้นสุด “ src ' และ ' ทุกอย่าง ” เป็นแอตทริบิวต์หลักสองรายการที่ใช้ภายในแท็ก “
”
ลองดูคำแนะนำด้านล่างเพื่อเพิ่มรูปภาพโดยใช้องค์ประกอบ !
ขั้นตอนที่ 1: สร้างคอนเทนเนอร์ div
ขั้นแรก สร้างคอนเทนเนอร์ div โดยใช้ ' ถัดไป ใช้แท็กหัวเรื่องที่ต้องการจาก “ ' ถึง ' ” แท็ก ตัวอย่างเช่น เราจะใช้แท็ก หลังจากนั้นให้เพิ่ม “ ตามผลลัพธ์ด้านล่าง รูปภาพที่ระบุได้รับการเพิ่มเรียบร้อยแล้ว: นักพัฒนายังสามารถเพิ่มรูปภาพจาก URL โดยใช้ CSS “ ภาพพื้นหลัง “สสส. เพื่อจุดประสงค์นี้ ให้ทำตามขั้นตอนด้านล่าง ขั้นแรก ให้ใส่ข้อความหัวเรื่องโดยใช้แท็กเปิดและปิด ถัดไป สร้างคอนเทนเนอร์ div โดยใช้แท็ก ตอนนี้ เข้าถึงชั้นเรียนผ่านตัวเลือกจุด “ . ” และชื่อคลาสที่สร้างไว้ก่อนหน้านี้ หลังจากนั้น ใช้คุณสมบัติ CSS ด้านล่างเพื่อเพิ่มรูปภาพจาก URL ภายในคลาส: ในรหัสที่ให้ไว้ด้านบน: เอาต์พุต คุณได้เรียนรู้เกี่ยวกับวิธีต่างๆ ในการเพิ่มรูปภาพจาก URL ในการเพิ่มรูปภาพจาก URL นักพัฒนาสามารถใช้ '
ขั้นตอนที่ 2: แทรกหัวเรื่อง
และเพิ่มข้อความเฉพาะเป็นส่วนหัวภายในแท็กเปิดและปิด
ขั้นตอนที่ 3: เพิ่มรูปภาพโดยใช้ URL ” แท็ก และแทรกแอตทริบิวต์ที่แสดงด้านล่างภายในแท็กรูปภาพ:
< แผนก ระดับ = 'img-คอนเทนเนอร์' >
< ชั่วโมง2 > เพิ่มรูปภาพด้วย URL < / ชั่วโมง2 >
< img src = 'https://images.pexels.com/photos/2260800/pexels-photo-2260800.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1' ทุกอย่าง = 'ภาพ!' ความสูง = '400px' ความกว้าง = '300px' / >
< / แผนก >
วิธีที่ 2: เพิ่มรูปภาพโดยใช้คุณสมบัติ CSS ใน HTML
ขั้นตอนที่ 1: แทรกหัวเรื่อง
ขั้นตอนที่ 2: สร้างคอนเทนเนอร์ div
<คลาส div = 'img-คอนเทนเนอร์' > >
ขั้นตอนที่ 3: เข้าถึงคอนเทนเนอร์
ขั้นตอนที่ 4: เพิ่มรูปภาพโดยใช้คุณสมบัติ CSS “background-image”
ความสูง : 400px ;
ความกว้าง : 250px ;
ขนาดพื้นหลัง : บรรจุ ;
ภาพพื้นหลัง : URL ( https : //รูปภาพ .pexel .com/photos/ 2260800 /pexels-ภาพ- 2260800 .jpeg? อัตโนมัติ = บีบอัด&cs = จิ๋วsrgb&w = 1260 &ชม = 750 &dpr = หนึ่ง )
}
บทสรุป
” แท็ก จากนั้นใส่ “ src แอตทริบิวต์ ” และกำหนด URL เป็นค่า “src” นอกจากนี้ ผู้ใช้สามารถเพิ่มรูปภาพจาก URL โดยใช้ CSS “ ภาพพื้นหลัง ' คุณสมบัติ. บทความนี้ระบุวิธีการเพิ่มรูปภาพจาก URL ใน HTML/CSS