ภาพพื้นหลัง CSS - วิธีเพิ่ม URL ภาพลงใน Div

สมมติว่าคุณต้องการใส่รูปภาพหนึ่งหรือสองภาพบนหน้าเว็บ วิธีหนึ่งคือการใช้background-imageคุณสมบัติ CSS

คุณสมบัตินี้จะใช้อย่างใดอย่างหนึ่งหรือมากกว่าภาพพื้นหลังเพื่อองค์ประกอบเช่น,เป็นเอกสารอธิบาย ใช้เพื่อเหตุผลด้านความสวยงามเช่นการเพิ่มพื้นหลังที่มีพื้นผิวให้กับหน้าเว็บของคุณ

เพิ่มรูปภาพ

เพิ่มรูปภาพโดยใช้background-imageพร็อพเพอร์ตี้ได้ง่ายๆ เพียงระบุเส้นทางไปยังรูปภาพในurl()ค่า

เส้นทางรูปภาพสามารถเป็น URL ดังที่แสดงในตัวอย่างด้านล่าง:

div { /* Background pattern from Toptal Subtle Patterns */ background-image: url("//amymhaddad.s3.amazonaws.com/morocco-blue.png"); height: 400px; width: 100%; } 

หรืออาจเป็นเส้นทางท้องถิ่น. นี่คือตัวอย่าง:

body { /* Background pattern from Toptal Subtle Patterns */ height: 400px; width: 100%; background-image: url("./images/oriental-tiles.png"); } 

เพิ่มหลายภาพ

คุณสามารถใช้หลายภาพกับbackground-imageพร็อพเพอร์ตี้

div { /* Background pattern from Toptal Subtle Patterns */ height: 400px; width: 100%; background-image: url("//amymhaddad.s3.amazonaws.com/morocco-blue.png"), url("//amymhaddad.s3.amazonaws.com/oriental-tiles.png"); background-repeat: no-repeat, no-repeat; background-position: right, left; } 

นั่นคือรหัสจำนวนมาก มาทำลายมันลง

คั่นแต่ละurl()ค่าของรูปภาพด้วยลูกน้ำ

background-image: url("//amymhaddad.s3.amazonaws.com/morocco-blue.png"), url("//amymhaddad.s3.amazonaws.com/oriental-tiles.png"); 

ตอนนี้จัดตำแหน่งและปรับปรุงภาพของคุณโดยใช้คุณสมบัติเพิ่มเติม

background-repeat: no-repeat, no-repeat; background-position: right, left; 

มีคุณสมบัติย่อยหลายอย่างที่คุณสามารถเพิ่มลงในภาพพื้นหลังของคุณได้เช่นbackground-repeatและbackground-positionที่เราใช้ในตัวอย่างข้างต้น คุณยังสามารถเพิ่มการไล่ระดับสีให้กับภาพพื้นหลังได้อีกด้วย

ดูว่าจะเป็นอย่างไรเมื่อเรารวมทุกอย่างเข้าด้วยกัน

สั่งซื้อเรื่อง

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

นี่คือตัวอย่าง

div { /* Background pattern from Toptal Subtle Patterns */ height: 400px; width: 100%; background-image: url("//amymhaddad.s3.amazonaws.com/morocco-blue.png"), url("//amymhaddad.s3.amazonaws.com/oriental-tiles.png"); background-repeat: no-repeat, no-repeat; } 

เราได้แสดงภาพสองภาพในโค้ดด้านบน ภาพแรก (morocco-blue.png) จะอยู่ข้างหน้าภาพที่สอง (oriental-tiles.png) ทั้งสองภาพมีขนาดเท่ากันและไม่มีความทึบดังนั้นเราจึงเห็นภาพแรกเท่านั้น

แต่ถ้าเราย้ายภาพที่สอง (oriental-tiles.png) ไปทางขวา 200 พิกเซลคุณจะเห็นบางส่วน (ส่วนที่เหลือยังคงซ่อนอยู่)

นี่คือสิ่งที่ดูเหมือนว่าเมื่อเรารวมทุกอย่างเข้าด้วยกัน

คุณควรใช้ภาพพื้นหลังเมื่อใด

มีหลายสิ่งที่ชอบเกี่ยวกับbackground-imageสถานที่ให้บริการ แต่มีข้อเสียเปรียบ

ผู้ใช้ทุกคนอาจไม่สามารถเข้าถึงรูปภาพได้เอกสารนี้ชี้ให้เห็นเช่นเดียวกับผู้ใช้โปรแกรมอ่านหน้าจอ

นั่นเป็นเพราะคุณไม่สามารถเพิ่มข้อมูลที่เป็นข้อความลงในbackground-imageพร็อพเพอร์ตี้ได้ ด้วยเหตุนี้โปรแกรมอ่านหน้าจอจะพลาดภาพไป

ใช้background-imageคุณสมบัติเฉพาะเมื่อคุณต้องการเพิ่มการตกแต่งบางอย่างให้กับเพจของคุณ มิฉะนั้นให้ใช้องค์ประกอบHTML หากรูปภาพมีความหมายหรือวัตถุประสงค์ตามที่เอกสารประกอบบันทึกไว้

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

คิดในลักษณะนี้: background-imageเป็นคุณสมบัติ CSS และ CSS มุ่งเน้นไปที่การนำเสนอหรือรูปแบบ HTML มุ่งเน้นไปที่ความหมายหรือความหมาย

เมื่อพูดถึงภาพคุณมีตัวเลือก หากต้องการภาพเพื่อการตกแต่งbackground-imageสถานที่ให้บริการอาจเป็นทางเลือกที่ดีสำหรับคุณ

ฉันเขียนเกี่ยวกับการเรียนรู้การเขียนโปรแกรมและวิธีที่ดีที่สุดในการดำเนินการ ( amymhaddad.com)