ในระหว่างกระบวนการพัฒนาส่วนหน้า ภาพพื้นหลังมักจะถูกเพิ่มลงในหน้า HTML เพื่อความสวยงามของหน้า ดังนั้นจะใช้ css เพื่อตั้งค่ารูปภาพเป็นพื้นหลังใน html ได้อย่างไร? บทความนี้จะแนะนำวิธีการตั้งค่าภาพพื้นหลังใน CSS เพื่อนๆ ที่ต้องการสามารถอ้างอิงและเรียนรู้ได้
1. ภาพรวมความเป็นมา
CSS สามารถเพิ่มสีพื้นหลังและรูปภาพพื้นหลัง รวมถึงการตั้งค่ารูปภาพได้
แอตทริบิวต์พื้นหลัง CSS เป็นคุณสมบัติที่กำหนดพื้นหลังโดยเฉพาะ คุณสามารถตั้งค่าสีพื้นหลังหรือรูปภาพพื้นหลังได้
2. คุณสมบัติ
1. สีพื้นหลัง
(1) ความหมายและการใช้งาน: แอตทริบิวต์สีพื้นหลังจะกำหนดสีพื้นหลังขององค์ประกอบ
(2) ช่วงของพื้นหลังองค์ประกอบ
คุณสมบัติสีพื้นหลังกำหนดสีทึบสำหรับองค์ประกอบ สีนี้เติมเนื้อหา ช่องว่างภายใน และพื้นที่เส้นขอบขององค์ประกอบ โดยขยายไปจนถึงขอบเขตด้านนอกของเส้นขอบขององค์ประกอบ (แต่ไม่ใช่ระยะขอบ) หากเส้นขอบมีส่วนโปร่งใส (เช่น ขอบเส้นประ) สีพื้นหลังจะแสดงผ่านส่วนที่โปร่งใสเหล่านี้
(3) ค่าที่โปร่งใส
แม้ว่าในกรณีส่วนใหญ่ การใช้แบบโปร่งใสก็ไม่จำเป็น อย่างไรก็ตาม หากคุณไม่ต้องการให้องค์ประกอบมีสีพื้นหลัง และคุณไม่ต้องการให้การตั้งค่าสีเบราว์เซอร์ของผู้ใช้ส่งผลต่อการออกแบบของคุณ การตั้งค่าความโปร่งใสก็ยังเป็นสิ่งที่จำเป็น
ใช้สีพื้นหลังเพื่อกำหนดสีพื้นหลังสำหรับองค์ประกอบ:
<!DOCTYPEhtml><html><head><title>พื้นหลัง CSS</title><style>#bg{color:white;พื้นหลัง-สี:blue;margin:20px;/*ตั้งค่าระยะขอบด้านนอกเป็น 20px*/padding : 20px;/*ตั้งค่าระยะขอบด้านในเป็น 20px*/border:10pxdottedyellow;/*ตั้งค่าขอบเส้นประสีเหลืองกว้าง 10px*/}</style></head><body><pid=bg>แอตทริบิวต์สีพื้นหลัง< /p></body></html>ผลลัพธ์การแสดงผลมีดังนี้:
จากผลการทำงาน เราจะเห็นว่าแอตทริบิวต์สีพื้นหลังสามารถกำหนดพื้นหลังสีทึบสำหรับองค์ประกอบได้ สีนี้จะเติมเนื้อหา ช่องว่างภายใน และพื้นที่เส้นขอบขององค์ประกอบ (สามารถเข้าใจได้ว่าเป็นเส้นขอบและ ทุกพื้นที่ภายในนั้น) สำหรับองค์ประกอบ พื้นที่นอกขอบเขต (ระยะขอบ) ไม่มีผลกระทบ
2. ภาพพื้นหลัง กำหนดภาพพื้นหลัง
ภาพพื้นหลัง: url (imgs/main_bg.jpg)
หากคุณสมบัติถูกตั้งค่าไว้ในไฟล์ css และรูปภาพไม่อยู่ในโฟลเดอร์ css ให้เพิ่มพาธที่อยู่ด้านหน้าเพื่อกลับไปยังโฟลเดอร์ก่อนหน้า.../
(1) คุณลักษณะ background-image ตั้งค่าภาพพื้นหลังสำหรับองค์ประกอบ
(2) พื้นหลังขององค์ประกอบครอบคลุมขนาดทั้งหมดขององค์ประกอบ รวมถึงช่องว่างภายในและเส้นขอบ แต่ไม่รวมระยะขอบ
(3) ตามค่าเริ่มต้น ภาพพื้นหลังจะอยู่ที่มุมซ้ายบนขององค์ประกอบและแสดงซ้ำในแนวนอนและแนวตั้ง
(4) url('URL'): เส้นทางที่ชี้ไปที่รูปภาพ
เคล็ดลับ: ตั้งค่าสีพื้นหลังที่ใช้ได้เพื่อให้เพจดูดีหากไม่มีรูปภาพพื้นหลัง
3. ภาพพื้นหลังซ้ำพื้นหลังซ้ำ
ตามค่าเริ่มต้น ภาพพื้นหลังจะครอบคลุมทั้งหน้า หากภาพพื้นหลังไม่ใหญ่พอที่จะครอบคลุมทั้งหน้า ภาพพื้นหลังจะถูกทำซ้ำใน Abscissa และจัดลำดับ
4. background-size กำหนดขนาดของภาพพื้นหลัง
5. ตำแหน่งพื้นหลัง กำหนดตำแหน่งภาพพื้นหลัง
ค่าเริ่มต้น: ซ้าย, ล่าง, ขวา, บน, กึ่งกลาง (กลาง)
หมายเหตุ: คุณยังสามารถใช้ค่าตัวเลขหรือเปอร์เซ็นต์ เช่น ตำแหน่งพื้นหลัง: 10px 10px แสดงถึงระยะห่างของพิกัดแนวนอนและแนวตั้งจากขอบด้านซ้ายและด้านบน
6. การแนบพื้นหลังถูกตั้งค่าเป็นคงที่หรือไม่
7.ความเป็นมา-ต้นกำเนิด
background-origin เป็นคุณสมบัติใหม่ใน CSS3 เมื่อใช้แอตทริบิวต์ตำแหน่งพื้นหลังเพื่อกำหนดตำแหน่งของภาพพื้นหลัง ตำแหน่งของมุมซ้ายบนขององค์ประกอบจะถูกคำนวณตามค่าเริ่มต้น คุณยังสามารถใช้แอตทริบิวต์ background-origin เพื่อกำหนดตำแหน่งสัมพัทธ์ของแอตทริบิวต์ตำแหน่งพื้นหลังเพื่อวางตำแหน่งภาพพื้นหลังได้ ค่าทางเลือกของแอตทริบิวต์ background-origin มีดังนี้:
8.คลิปพื้นหลัง
background-clip เป็นแอตทริบิวต์ใหม่ใน CSS3 ซึ่งสามารถตั้งค่าพื้นที่แสดงภาพพื้นหลังได้ ค่าตัวเลือกสำหรับแอตทริบิวต์พื้นหลังคลิปมีดังนี้:
หมายเหตุ: ความโปร่งแสงของพื้นหลังหมายความว่าพื้นหลังของกล่องโปร่งแสง และเนื้อหาภายในกล่องจะไม่ได้รับผลกระทบ
9. พื้นหลัง
พื้นหลังเป็นตัวย่อของแอตทริบิวต์พื้นหลัง คุณไม่เพียงแต่สามารถตั้งค่าแอตทริบิวต์พื้นหลังบางอย่างสำหรับองค์ประกอบได้ แต่ยังตั้งค่าแอตทริบิวต์พื้นหลังหลายรายการหรือทั้งหมดในเวลาเดียวกันได้อีกด้วย ไม่มีลำดับคงที่เมื่อตั้งค่าคุณสมบัติพื้นหลังหลายรายการ แต่ขอแนะนำให้ใช้ลำดับต่อไปนี้:
สีพื้นหลัง||ภาพพื้นหลัง||ตำแหน่งพื้นหลัง[/ขนาดพื้นหลัง]?||พื้นหลังซ้ำ||สิ่งที่แนบมากับพื้นหลัง||ต้นกำเนิดพื้นหลัง||คลิปพื้นหลัง
หมายเหตุ: ความแตกต่างระหว่างภาพพื้นหลังและแอตทริบิวต์ img:
(1) องค์ประกอบ img เป็นของแนวคิดของ HTML และภาพพื้นหลังเป็นของแนวคิดของ css
(2) เมื่อรูปภาพเป็นของเนื้อหาเว็บ ต้องใช้องค์ประกอบ img
(3) เมื่อใช้รูปภาพเพื่อตกแต่งหน้าเท่านั้น ต้องใช้ภาพพื้นหลัง