ใช้ CSS เพื่อตั้งภาพพื้นหลัง

• เมษายน 28, 2024

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

Building Block พื้นฐานสำหรับภาพพื้นหลังของคุณคือคุณสมบัติ 'ภาพพื้นหลัง' อย่างเหมาะสม คุณใช้คุณสมบัตินี้เพื่อบอกไซต์ของคุณว่ามีไฟล์รูปภาพอยู่ที่ใดดังนี้

ร่างกาย {
ภาพพื้นหลัง: url ("image.gif");
}

นั่นคือทั้งหมดที่คุณต้องทำเพื่อวางภาพพื้นหลังสำหรับหน้าเว็บของคุณ แน่นอนคุณอาจต้องการกำหนดลักษณะที่ปรากฏของรูปภาพเอง สมมติว่าคุณต้องการให้ภาพของคุณเริ่มต้นที่ด้านบนของหน้า แต่ให้อยู่กึ่งกลางในแนวนอนแทนที่จะจัดแนวซ้าย (การจัดแนวเริ่มต้น) ในกรณีนั้นคุณจะต้องเพิ่มคุณสมบัติ 'ตำแหน่งพื้นหลัง' ในกฎ CSS ของคุณ:

ร่างกาย {
ภาพพื้นหลัง: url ("image.gif");
พื้นหลังตำแหน่ง: กลางด้านบน;
}

เมื่อกำหนดคุณสมบัติ 'ตำแหน่งพื้นหลัง' ค่าแรกจะตั้งค่าการจัดแนวนอน (ซ้าย, กลางหรือขวา) และที่สองตั้งค่าการจัดตำแหน่งแนวตั้งของภาพ (บน, กลางหรือล่าง)

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

ร่างกาย {
ภาพพื้นหลัง: url ("image.gif");
พื้นหลังตำแหน่ง: กลางด้านบน;
พื้นหลังซ้ำ: ซ้ำ -y;
}

การตั้งค่าเป็น 'repeat-y' จะบอกให้เบราว์เซอร์เรียงภาพพื้นหลังตามแนวแกน y หรือในแนวตั้ง แต่ไม่ใช่แกน x (แนวนอน) ซึ่งเป็นสิ่งที่เราต้องการอย่างแท้จริง หากคุณต้องการเรียงต่อกันเป็นแนวนอน แต่ไม่ใช่แนวตั้งคุณจะต้องใช้ค่า 'ซ้ำ -x' แทน หากคุณไม่ต้องการให้ภาพเรียงต่อกันให้กำหนดค่าเป็น 'ไม่ต้องทำซ้ำ' ค่าเริ่มต้นคือการเรียงภาพทั้งแนวนอนและแนวตั้งดังนั้นหากเป็นตัวเลือกที่ดีที่สุดสำหรับภาพของคุณคุณไม่จำเป็นต้องตั้งค่าคุณสมบัติ 'ทำซ้ำพื้นหลัง' เลย

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

ร่างกาย {
ภาพพื้นหลัง: url ("image.gif");
พื้นหลังตำแหน่ง: กลางด้านบน;
พื้นหลังซ้ำ: ซ้ำ -y;
พื้นหลังแนบ: แก้ไข;
}


หากคุณต้องการรักษากฎ CSS ของคุณให้เล็กที่สุดเท่าที่จะเป็นไปได้คุณสามารถรวมค่าพื้นหลังทั้งหมดของคุณไว้ในบรรทัดเดียวโดยใช้คุณสมบัติ 'พื้นหลัง' เช่นนี้

พื้นหลัง {
url ("image.gif") ทำซ้ำศูนย์บนคงที่;
}

เมื่อใช้คุณสมบัติ 'พื้นหลัง' คุณต้องแสดงรายการค่าตามลำดับเฉพาะ:
[พื้นหลังสี (ถ้าใช้)] [พื้นหลังภาพ] [พื้นหลังซ้ำ] [แนบพื้นหลัง] [ตำแหน่งพื้นหลัง] คุณสามารถละทิ้งค่าใด ๆ ที่คุณไม่ต้องการคุณเพียงแค่ต้องแสดงรายการค่าใด ๆ ที่คุณใช้ตามลำดับที่เหมาะสมมิเช่นนั้นกฎจะไม่ทำงาน