ลิงก์ต้นฉบับ: พื้นหลังใน CSS: ทุกสิ่งที่คุณต้องการรู้
ลิงก์การแปล: คู่มือพื้นหลัง CSS
โปรดรักษาลิขสิทธิ์และลิงก์เมื่อพิมพ์ซ้ำ
พื้นหลังเป็นส่วนสำคัญของ CSS และเป็นหนึ่งในความรู้พื้นฐานของ CSS ที่คุณต้องรู้ บทความนี้จะครอบคลุมถึงการใช้ CSS พื้นหลังขั้นพื้นฐาน (พื้นหลัง) รวมถึงคุณลักษณะต่างๆ เช่น การแนบพื้นหลัง เป็นต้น และยังแนะนำเทคนิคทั่วไปบางประการเกี่ยวกับพื้นหลัง (พื้นหลัง) รวมถึงพื้นหลัง (พื้นหลัง) ใน CSS3 (รวม 4 ใหม่คุณสมบัติพื้นหลัง)
พื้นหลังใน CSS2
ภาพรวม
มีคุณสมบัติพื้นหลังหลัก 5 ประการใน CSS2 ได้แก่:
คุณสมบัติเหล่านี้สามารถนำมารวมกันเป็นคุณสมบัติตัวย่อเดียวได้: พื้นหลัง ประเด็นสำคัญประการหนึ่งที่ควรทราบก็คือ พื้นหลังครอบคลุมพื้นที่เนื้อหาขององค์ประกอบทั้งหมด รวมถึงช่องว่างภายในและเส้นขอบ แต่ไม่รวมระยะขอบขององค์ประกอบ มันทำงานได้ดีใน Firefox, Safari, Opera และ IE8 แต่ใน IE6 และ IE7 พื้นหลังจะไม่รวมเส้นขอบ
คุณสมบัติพื้นฐาน
สีพื้นหลัง
คุณสมบัติสีพื้นหลังจะเติมพื้นหลังด้วยสีทึบ มีหลายวิธีในการระบุสีนี้ และวิธีการต่อไปนี้ทั้งหมดให้ผลลัพธ์เหมือนกัน
สีพื้นหลัง: สีฟ้า;
สีพื้นหลัง: rgb (0, 0, 255);
สีพื้นหลัง: #0000ff;
สีพื้นหลังสามารถตั้งค่าให้โปร่งใสได้ ซึ่งทำให้มองเห็นองค์ประกอบที่อยู่ด้านล่างได้
ภาพพื้นหลัง
แอตทริบิวต์ background-image ช่วยให้ระบุภาพที่จะแสดงในพื้นหลัง สามารถใช้ร่วมกับสีพื้นหลังได้ ดังนั้นหากรูปภาพไม่ซ้ำ พื้นที่ที่รูปภาพไม่ครอบคลุมจะถูกเติมด้วยสีพื้นหลัง โค้ดนั้นง่ายมาก เพียงจำไว้ว่าเส้นทางนั้นสัมพันธ์กับสไตล์ชีต ดังนั้นในโค้ดต่อไปนี้ รูปภาพและสไตล์ชีตจึงอยู่ในไดเร็กทอรีเดียวกัน
ภาพพื้นหลัง: url(image.jpg);
แต่ถ้ารูปภาพอยู่ในไดเร็กทอรีย่อยที่เรียกว่ารูปภาพ ก็ควรเป็น:
ภาพพื้นหลัง: url (images/image.jpg);
Tangbantomatoes: ใช้ ../ เพื่อระบุไดเร็กทอรีระดับบน เช่น background-image: url(../images/image.jpg); เพื่อระบุว่ารูปภาพอยู่ในไดเร็กทอรีย่อยของ image ในไดเร็กทอรีระดับบนของ สไตล์ชีต มันซับซ้อนนิดหน่อย แต่ทุกคนควรรู้เรื่องนี้อยู่แล้ว ดังนั้นฉันจะไม่อธิบายอย่างละเอียด การสังเกตส่วนหน้า สงวนลิขสิทธิ์ โปรดเก็บลิงก์ไว้เมื่อพิมพ์ซ้ำ