สีพื้นหลังและรูปภาพ
ใช้สีพื้นหลังและรูปภาพด้วยคุณสมบัติ background-color และ background-image
สีพื้นหลังและรูปภาพ เป็นบทเรียน CSS Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน CSS Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส CSS Academy มีบทเรียนทั้งหมด 4 บทเรียน
สีพื้นหลัง
คุณสมบัติ background-color กำหนดสีทึบด้านหลังองค์ประกอบ โดยรับค่าของสี CSS ได้ทุกแบบ และจะแสดงให้เห็นผ่านบริเวณโปร่งใสของภาพพื้นหลัง
<div class="hero">Hero section</div>
ภาพพื้นหลัง
คุณสมบัติ background-image กำหนดภาพหนึ่งภาพหรือหลายภาพให้เป็นพื้นหลังขององค์ประกอบ ภาพจะถูกวางซ้อนอยู่เหนือ background-color
<div class="banner">Banner (image missing → fallback color shows)</div>
ขนาดพื้นหลัง
คุณสมบัติ background-size ควบคุมขนาดของภาพ ค่าที่สำคัญมีดังนี้:
cover— เติมเต็มพื้นที่ และตัดภาพหากจำเป็นcontain— ปรับภาพให้พอดีอยู่ภายในทั้งหมด แต่อาจเหลือช่องว่าง100% 100%— ยืดภาพให้เต็มพื้นที่พอดี
<div class="hero"></div>
ตำแหน่งพื้นหลัง
คุณสมบัติ background-position กำหนดตำแหน่งที่วางภาพ ให้ใช้คีย์เวิร์ดหรือค่าร้อยละและค่าความยาว
<div class="hero"></div>
การทำซ้ำพื้นหลัง
โดยค่าเริ่มต้น ภาพจะถูกเรียงซ้ำเป็นลวดลาย ให้ควบคุมการเรียงซ้ำด้วย background-repeat:
<div class="hero"></div>
<div class="pattern"></div>
การยึดพื้นหลัง
คุณสมบัติ background-attachment กำหนดว่าภาพจะเลื่อนตามหน้าเว็บหรือไม่ ค่า fixed ทำให้เกิดเอฟเฟกต์คล้ายพารัลแลกซ์ ส่วน scroll เป็นค่าเริ่มต้น
<div class="spacer">Scroll down ↓</div>
<div class="parallax">Fixed background</div>
<div class="spacer">Scroll up ↑</div>
พื้นหลังหลายชั้น
CSS รองรับชั้นพื้นหลังหลายชั้นที่คั่นด้วยเครื่องหมายจุลภาค ชั้นแรกที่ระบุจะปรากฏอยู่ด้านบนสุด
<div class="card">Overlay + photo layers</div>
การเขียนพื้นหลังแบบย่อ
คุณสมบัติ background แบบย่อรวมคุณสมบัติพื้นหลังทั้งหมดไว้ในการประกาศเดียว ลำดับมีความสำคัญต่อขนาด โดยให้เขียนขนาดหลังตำแหน่งและคั่นด้วย /
<div class="hero"></div>
ขอบเขตและจุดกำเนิดของพื้นหลัง
background-clip ควบคุมบริเวณที่วาดพื้นหลังโดยอ้างอิงจากแบบจำลองกล่อง ส่วน background-origin กำหนดจุดอ้างอิงสำหรับการวางตำแหน่ง
<div class="card">Clip & Origin</div>
การตัดพื้นหลังตามข้อความ
ใช้ background-clip: text ร่วมกับสีข้อความแบบโปร่งใส เพื่อตัดภาพพื้นหลังหรือการไล่ระดับสีให้เป็นไปตามรูปร่างของข้อความ
<h1>Gradient Text</h1>
การปรับวัตถุสำหรับ <img> เทียบกับภาพพื้นหลัง
สำหรับแท็ก <img> ให้ใช้ object-fit: cover และ object-position แทนภาพพื้นหลัง วิธีนี้ช่วยให้ภาพยังคงอยู่ใน DOM เพื่อการเข้าถึงและการปรับปรุงการค้นหา
<img class="hero-img" src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='800'><rect width='400' height='800' fill='%23ff6347'/><circle cx='200' cy='200' r='150' fill='%231e90ff'/></svg>" alt="hero" />
ตรวจสอบความเข้าใจ
ค่าใดของ background-size ที่เติมเต็มพื้นที่และตัดภาพแทนที่จะเหลือช่องว่าง
สรุป
ใช้ background-color เป็นสีสำรองด้านล่างภาพ background-size: cover เป็นตัวเลือกหลักสำหรับภาพฮีโร่ที่เต็มพื้นที่ ชั้นพื้นหลังหลายชั้นช่วยเพิ่มความสามารถในการประกอบภาพ ส่วนคุณสมบัติแบบย่อช่วยรวมคุณสมบัติพื้นหลังทั้งหมดให้กระชับ
คำถามที่พบบ่อย
บทเรียน “สีพื้นหลังและรูปภาพ” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “สีพื้นหลังและรูปภาพ” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส CSS Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส CSS Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “สีพื้นหลังและรูปภาพ”
ใช้สีพื้นหลังและรูปภาพด้วยคุณสมบัติ background-color และ background-image คุณปฏิบัติ CSS Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน CSS Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน CSS Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน
บทเรียน “สีพื้นหลังและรูปภาพ” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน CSS Academy นี้ได้ไหม
ได้ บทเรียน CSS Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- ค่าสี: ชื่อ รหัสฐานสิบหก RGB และ HSL
- สีพื้นหลังและรูปภาพ
- การไล่ระดับสี: เชิงเส้นและแนวรัศมี
- ความทึบและความโปร่งใสแบบ RGBA