พื้นหลัง CSS เทียบกับสีพื้นหลัง

แล้วเพิ่มหัวเรื่องและย่อหน้า

HTML

< div >

< ชั่วโมง1 > Linuxคำแนะนำ < / ชั่วโมง1 >

< พี > ยินดีต้อนรับสู่เว็บไซต์ของเรา < / พี >

< / div >

ใน CSS เราจะปรับความสูงของ div เป็น “ 100% ” เพื่อให้ปรากฏบนทั้งหน้าและขนาดตัวอักษรของข้อความเป็น “ xx-ขนาดใหญ่ ” หลังจากนั้นให้ตั้งค่าสีพื้นหลังเป็น “ aqua ”

CSS

div {

ความสูง : 100% ;

ขนาดตัวอักษร : xx-ขนาดใหญ่ ;

สีพื้นหลัง : aqua ;

}

ในภาพด้านล่าง คุณจะเห็นว่ามีการใช้สีพื้นหลัง:

CSS background-image คุณสมบัติ

“ ภาพพื้นหลัง คุณสมบัติ ” ใช้เพื่อตั้งค่ารูปภาพหนึ่งภาพขึ้นไปเป็นพื้นหลังขององค์ประกอบ HTML คุณสามารถใช้คุณสมบัตินี้เพื่อเพิ่มภาพพื้นหลังที่แตกต่างกันสำหรับองค์ประกอบต่างๆ

ไวยากรณ์

ไวยากรณ์ของคุณสมบัติ background-image คือ:

ภาพพื้นหลัง: url()

ที่นี่ ให้เส้นทางของภาพที่คุณต้องการตั้งเป็นพื้นหลังเป็นอาร์กิวเมนต์ของ ' url() ”

ตัวอย่าง

ต่อจากตัวอย่างที่แล้ว ให้เพิ่มภาพพื้นหลังใน “ div ' ระดับ. เราจะเพิ่ม URL ของภาพเป็น “ url (img.jpg) ”:

div {

...

ภาพพื้นหลัง : url ( img.jpg ) ;

}

ผลลัพธ์ด้านล่างระบุว่าเพิ่มภาพพื้นหลังสำเร็จแล้ว:

โปรดทราบว่าภาพซ้ำ ในการแก้ปัญหานี้ ให้ตรวจสอบคุณสมบัติถัดไป

คุณสมบัติ CSS พื้นหลังซ้ำ

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

ไวยากรณ์

ไวยากรณ์ของคุณสมบัติ background-repeat คือ:

พื้นหลัง-ซ้ำ : ทำซ้ำ | ซ้ำ-x | ทำซ้ำ-y | ไม่ซ้ำ

คำอธิบายของค่าที่ระบุของคุณสมบัติการทำซ้ำพื้นหลังได้รับด้านล่าง:

• ทำซ้ำ: ใช้สำหรับทำซ้ำภาพทั้งสองทิศทางในแนวตั้งและแนวนอน
• ทำซ้ำ-x: ใช้สำหรับตั้งค่าการทำซ้ำของภาพในแนวนอนเท่านั้น
• ทำซ้ำ-y: ระบุการทำซ้ำในแนวตั้งของรูปภาพ
• ไม่ซ้ำ: ใช้เพื่อหลีกเลี่ยงไม่ให้ภาพซ้ำกัน

ตัวอย่าง

ที่นี่เราจะตั้งค่าคุณสมบัติการทำซ้ำพื้นหลังเป็น ' ไม่ซ้ำ ”:

div {

...

พื้นหลัง-ซ้ำ : ไม่ซ้ำ ;

}

ผลลัพธ์ของรหัสที่ให้ไว้ข้างต้นแสดงไว้ด้านล่าง คุณจะเห็นว่าภาพไม่ซ้ำอีกต่อไป:

คุณสมบัติ CSS พื้นหลังตำแหน่ง

ในการกำหนดตำแหน่งของภาพพื้นหลัง ให้ปุ่ม “ พื้นหลังตำแหน่ง ” ใช้คุณสมบัติ ช่วยให้คุณปรับภาพในตำแหน่งต่างๆ เช่น ซ้ายบน กลางซ้าย ล่างซ้าย ขวาบน กลางขวา และอื่นๆ อีกมากมาย

ไวยากรณ์

ไวยากรณ์ของคุณสมบัติตำแหน่งพื้นหลังคือ:

พื้นหลังตำแหน่ง : ค่า

ในสถานที่ของ “ ค่า ” คุณสามารถระบุตำแหน่งของรูปภาพได้

ตัวอย่าง

ที่นี่เราจะกำหนดตำแหน่งพื้นหลังเป็น “ ศูนย์กลาง ”:

div {

...

พื้นหลังตำแหน่ง : ศูนย์กลาง ;

}

ในผลลัพธ์ด้านล่าง รูปภาพจะปรากฏที่กึ่งกลางของหน้า:

คุณสมบัติขนาดพื้นหลัง CSS

เพื่อกำหนดขนาดของภาพพื้นหลัง ให้ “ ขนาดพื้นหลัง ” ใช้คุณสมบัติ

ไวยากรณ์

ขนาดพื้นหลังมีไวยากรณ์ต่อไปนี้:

ขนาดพื้นหลัง : ความยาว|ปก

ต่อไปนี้เป็นคำอธิบายค่าของคุณสมบัติขนาดพื้นหลัง:

• ความยาว: ใช้สำหรับกำหนดความกว้างและความสูงของภาพพื้นหลัง
• ปิดบัง: ใช้เพื่อปรับภาพพื้นหลังในพื้นหลังทั้งหมด

ตัวอย่าง

เราจะกำหนดขนาดของพื้นหลังเป็น “ 100% ” ความสูงและ “ 80% ' ความกว้าง:

div {

...

ขนาดพื้นหลัง : 100% 80% ;

}

คุณจะเห็นว่ารูปภาพถูกปรับขนาดตามขนาดที่ระบุ:

คุณสมบัติที่มาพื้นหลัง CSS

“ ภูมิหลัง-ต้นกำเนิด ” ใช้เพื่อปรับพื้นที่การวางตำแหน่งของภาพพื้นหลัง ภาพจะถูกปรับที่มุมบนซ้ายเป็นค่าเริ่มต้น

ไวยากรณ์

ไวยากรณ์ของคุณสมบัติต้นกำเนิดพื้นหลังคือ:

ภูมิหลัง-ต้นกำเนิด : padding-box| ขอบกล่อง | กล่องเนื้อหา

ค่าของคุณสมบัติต้นกำเนิดพื้นหลังอธิบายไว้ด้านล่าง:

• padding-กล่อง: เป็นค่าเริ่มต้นของคุณสมบัติต้นทางพื้นหลังที่ใช้ในการปรับตำแหน่งของภาพพื้นหลังตามขอบช่องว่างภายใน
• ขอบกล่อง: ใช้สำหรับตั้งค่ารูปภาพตามเส้นขอบของรูปภาพ
• กล่องเนื้อหา: ใช้เพื่อกำหนดภาพพื้นหลังตามเนื้อหาของภาพ

บันทึก: คุณสมบัติที่มาของพื้นหลังจะไม่ทำงานหากตั้งค่าคุณสมบัติการแนบพื้นหลังเป็น “ แก้ไขแล้ว ”

ตัวอย่าง

ขั้นแรก สร้างเส้นขอบรอบคอนเทนเนอร์ ที่นี่ เราจะทำต่อจากตัวอย่างก่อนหน้าและตั้งค่าการเติมเป็น “ 10px ” หลังจากนั้นให้ปรับความกว้างของเส้นขอบเป็น “ 15px ” สไตล์เป็น “ สันเขา ” และสีเป็น “ rgb(1, 68, 68) ” ในตอนท้ายเราจะกำหนดค่าคุณสมบัติต้นกำเนิดพื้นหลังเป็น ' กล่องเนื้อหา ”:

div {

...

การขยายความ : 10px ;

ชายแดน : 15px สันเขา rgb ( 1 , 68 , 68 ) ;

ภูมิหลัง-ต้นกำเนิด : กล่องเนื้อหา ;

}

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

CSS background-clip คุณสมบัติ

“ เบื้องหลังคลิป ” คุณสมบัติทำงานบนสีพื้นหลังขององค์ประกอบ ช่วยให้คุณควบคุมได้ว่าสีพื้นหลังจะขยายออกไปไกลกว่าองค์ประกอบเพียงใด เช่น ช่องว่างภายในขององค์ประกอบ เส้นขอบ และเนื้อหา

ไวยากรณ์

ไวยากรณ์ของคุณสมบัติ background-clip คือ:

ภูมิหลัง-ต้นกำเนิด : ขอบกล่อง | padding-box | กล่องเนื้อหา

ค่าของคุณสมบัติต้นกำเนิดพื้นหลังอธิบายไว้ด้านล่าง:

• ขอบกล่อง: เป็นค่าเริ่มต้นของคุณสมบัติต้นทางพื้นหลังที่ใช้กำหนดสีพื้นหลังด้านหลังเส้นขอบ
• padding-กล่อง: ใช้เพื่อปรับสีภายในช่องเติมขององค์ประกอบ
• กล่องเนื้อหา: ใช้เพื่อกำหนดสีพื้นหลังตามเนื้อหาขององค์ประกอบ

ตัวอย่าง

เราจะดำเนินการต่อในตัวอย่างก่อนหน้าและเปลี่ยนค่าของรูปแบบเส้นขอบเป็น ' จุด ” เพื่อทำความเข้าใจคุณสมบัติของคลิปพื้นหลัง หลังจากนั้นเราจะตั้งค่าคุณสมบัติ background-clip เป็น “ padding-box ”:

div {

...

เบื้องหลังคลิป : padding-box ;

}

ผลลัพธ์แสดงว่าสีพื้นหลังสีขาวปรากฏขึ้นเมื่อขอบขอบสิ้นสุด:

คุณสมบัติไฟล์แนบพื้นหลัง CSS

“ ไฟล์แนบพื้นหลัง คุณสมบัติ ” ใช้เพื่อปรับพฤติกรรมหรือรูปภาพขณะเลื่อนหน้า พฤติกรรมของมันสามารถตั้งค่าการเลื่อนด้วยองค์ประกอบอื่น ๆ หรือแก้ไขได้

ไวยากรณ์

ไวยากรณ์ของคุณสมบัติการแนบพื้นหลังคือ:

ไฟล์แนบพื้นหลัง : ค่า

คุณสามารถตั้งค่าของไฟล์แนบพื้นหลังเป็น “ แก้ไขแล้ว ” เพื่อแก้ไขภาพพื้นหลังหรือ “ เลื่อน ” เพื่อให้ภาพเลื่อนไปพร้อมกับหน้า

บันทึก: โดยค่าเริ่มต้น ค่าของคุณสมบัติการแนบพื้นหลังถูกตั้งค่าเป็น “ เลื่อน ”

จะเห็นได้ว่าภาพพื้นหลังที่เพิ่มเข้ามานั้นไม่คงที่เมื่อเราเลื่อนดู ตอนนี้มาแก้ไขปัญหานี้กัน

ในการทำเช่นนั้น เราตั้งค่าคุณสมบัติการแนบพื้นหลังเป็น “ แก้ไขแล้ว ”:

div {

...

ไฟล์แนบพื้นหลัง : แก้ไขแล้ว ;

}

นี่คือผลลัพธ์ที่แสดงให้เห็นว่ารูปภาพได้รับการแก้ไขแล้ว:

ตอนนี้ ไปที่การเปรียบเทียบระหว่างคุณสมบัติพื้นหลังและสีพื้นหลัง

พื้นหลัง CSS เทียบกับสีพื้นหลัง

ตารางที่กำหนดจะแยกความแตกต่างของคุณสมบัติพื้นหลังและสีพื้นหลังบนฐานของคุณสมบัติ:

คุณสมบัติ	พื้นหลัง CSS	CSS พื้นหลังสี
พิมพ์	เป็นทรัพย์สินชั้นยอด	เป็นพร็อพเพอร์ตี้ย่อยของคุณสมบัติพื้นหลัง
ฟังก์ชั่น	มันตั้งค่าคุณสมบัติพื้นหลังทั้งหมด	มันกำหนดเฉพาะสีพื้นหลัง
แนว	รองรับคุณสมบัติพื้นหลังทั้งหมด	รองรับเฉพาะคุณสมบัติสีพื้นหลัง
ระดับ	เมื่อคุณต้องการเพิ่มค่าพื้นหลังหลายค่า ก็ใช้งานง่าย คุณสามารถตั้งค่าคุณสมบัติพื้นหลังทั้งหมดได้ในครั้งเดียว	สามารถใช้เมื่อคุณต้องการเพิ่มสีพื้นหลังเพียงสีเดียว
ไวยากรณ์	พื้นหลัง: ค่า (ค่าต่างๆ ได้แก่ bg-color, bg-image และคุณสมบัติอื่นๆ)	พื้นหลัง-สี: สี

มีการอธิบายว่าคุณสมบัติสีพื้นหลังแตกต่างจากคุณสมบัติพื้นหลังอย่างไร

บทสรุป

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