วิธีเปลี่ยนสีพื้นหลังด้วย CSS

ช่วงเวลาที่น่าตื่นเต้นที่สุดในอาชีพนักพัฒนา front-end คือการเรียนรู้วิธีเปลี่ยนสีพื้นหลังของหน้าเว็บ

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

---

---

คู่มือนี้จะครอบคลุมทุกสิ่งที่คุณจำเป็นต้องรู้เกี่ยวกับการเปลี่ยนสีพื้นหลังด้วย CSS

รับการตั้งค่า

ขอเคาะออกงานเบื้องต้นเล็กน้อย

ผู้คนใช้กิ๊กเพื่ออะไร

บันทึก : ฉันแนะนำให้ใช้ รหัส Visual Studio กับ ส่วนขยายเซิร์ฟเวอร์สด เพื่อดูการเปลี่ยนแปลงแบบเรียลไทม์เมื่อคุณอัปเดต HTML และ CSS

1. สร้างโฟลเดอร์สำหรับไฟล์โครงการของคุณ
2. สร้าง index.html ไฟล์ที่จะเก็บ HTML ของคุณ คุณสามารถใช้รหัสสำเร็จรูปหรือเพียงแค่ตั้งค่าบางอย่าง , , และ แท็ก
3. สร้าง สไตล์.css ไฟล์สำหรับ CSS ของคุณ
4. เชื่อมโยงไฟล์ CSS ของคุณกับ HTML โดยวาง ข้างใน แท็ก

ตอนนี้คุณพร้อมที่จะเริ่มแก้ไข CSS แล้ว

ที่เกี่ยวข้อง: วิธีสร้างเว็บไซต์ Boilerplate

---

---

วิธีเปลี่ยนสีพื้นหลังด้วย CSS

วิธีที่ง่ายที่สุดในการเปลี่ยนสีพื้นหลังคือการกำหนดเป้าหมาย ร่างกาย แท็ก จากนั้นให้แก้ไข สีพื้นหลัง คุณสมบัติ. คุณสามารถค้นหารหัสสีได้โดยการค้นหาและใช้ส่วนขยายเบราว์เซอร์ Google Color Picker

body {
background-color: rgb(191, 214, 255);
}


รหัสนี้เปลี่ยนพื้นหลังเป็นสีฟ้าอ่อนที่สวยงาม

---

---

NS สีพื้นหลัง คุณสมบัติยอมรับสีในหกรูปแบบที่แตกต่างกัน:

• ชื่อ : ฟ้าอ่อน; (สำหรับการประมาณที่ใกล้เคียง)
• รหัสฐานสิบหก : #bfd6ff;
• rgb : rgb(191, 214, 255);
• rgba : rgba (191, 214, 255, 1); ที่ไหน ถึง คืออัลฟ่า (ทึบ)
• HSL : hsl(218°, 100%, 87%);
• HSLA : hsla (218 °, 100%, 87%, 1); ที่ไหน ถึง คืออัลฟ่า (ทึบ)

ใช้ชวเลข พื้นหลัง ทรัพย์สินแทน สีพื้นหลัง เพื่อตัดรหัสพิเศษ คุณสามารถเปลี่ยนสีพื้นหลังขององค์ประกอบ HTML ได้โดยใช้วิธีนี้

สร้าง องค์ประกอบและกำหนดคลาส—ในกรณีนี้ คลาสคือ แผงหน้าปัด . ตั้งค่า ความสูง และ ความกว้าง คุณสมบัติใน CSS เลือกองค์ประกอบใน CSS และระบายสีออกไป

body {
background-color: rgb(191, 214, 255);
}
.container{
display: flex;
justify-content: center;
align-items: center;
height: 90vh;
}
.panel {
background: rgb(255, 148, 148);
height: 10rem;
width: 30%;
}
.muo-text {
font-size: 3em;
font-weight: bolder;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
position: absolute;
}


ที่นี่คุณสามารถเห็น ร่างกาย พื้นหลัง คุณสมบัติมีสไตล์โดยอิสระจาก .แผงหน้าปัด พื้นหลัง คุณสมบัติ.

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

body {
background: linear-gradient(90deg, rgba(234,233,255,1) 0%, rgba(252,167,213,1) 35%, rgba(194,245,255,1) 100%);
}


วิธีเปลี่ยนภาพพื้นหลังใน CSS

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

ตรวจสอบให้แน่ใจว่ารูปภาพอยู่ในโฟลเดอร์เดียวกับไฟล์ HTML และ CSS มิฉะนั้น คุณจะต้องใช้เส้นทางของไฟล์ภายในวงเล็บ แทนที่จะใช้แค่ชื่อ:

body {
background: url(leaves-and-trees.jpg)
}


โว้ว! ดูเหมือนว่าภาพจะซูมเข้ามากเกินไป คุณแก้ไขได้ด้วยปุ่ม ขนาดพื้นหลัง คุณสมบัติ.

body {
background: url(leaves-and-trees.jpg);
background-size: cover;
}


การใช้ชวเลข พื้นหลัง ทรัพย์สินร่วมกับ ขนาดพื้นหลัง คุณสมบัติ ปิดบัง คุณต้องระบุ .ด้วย พื้นหลังตำแหน่ง คุณสมบัติและแยกค่าด้วยแบ็กสแลช (แม้ว่าจะเป็นค่าเริ่มต้นของตำแหน่งเช่น บนซ้าย .)

body {
background: url(leaves-and-trees.jpg) top left / cover;
}


ไปเลย! ภาพพื้นหลังที่มีขนาดเหมาะสมใน CSS หนึ่งบรรทัด

อ่านเพิ่มเติม: วิธีการตั้งค่าภาพพื้นหลังใน CSS

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

เพิ่มเกม CSS ของคุณด้วย CSS box-shadow

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

ลองเพิ่มกล่องของคุณด้วย CSS box-shadow องค์ประกอบ HTML ของคุณไม่เคยดูดีขึ้นเลย!

แบ่งปัน แบ่งปัน ทวีต อีเมล วิธีใช้ CSS box-shadow: 13 เคล็ดลับและตัวอย่าง

กล่องที่ดูจืดชืดดูน่าเบื่อ ตกแต่งมันด้วยเอฟเฟกต์เงากล่อง CSS!

อ่านต่อไป หัวข้อที่เกี่ยวข้อง

• การเขียนโปรแกรม
• การพัฒนาเว็บ
• ออกแบบเว็บ
• CSS

เกี่ยวกับผู้เขียน Marcus Mears III(เผยแพร่บทความ 26 บทความ)

Marcus เป็นผู้ที่ชื่นชอบเทคโนโลยีมาตลอดชีวิตและเป็นนักเขียนบรรณาธิการที่ MUO เขาเริ่มงานเขียนอิสระในปี 2020 ครอบคลุมเทคโนโลยี แกดเจ็ต แอพ และซอฟต์แวร์ที่กำลังเป็นที่นิยม เขาศึกษาวิทยาการคอมพิวเตอร์ในวิทยาลัยโดยมุ่งเน้นที่การพัฒนาเว็บส่วนหน้า

เพิ่มเติมจาก Marcus Mears III

สมัครรับจดหมายข่าวของเรา

เข้าร่วมจดหมายข่าวของเราสำหรับเคล็ดลับทางเทคนิค บทวิจารณ์ eBook ฟรี และดีลพิเศษ!

คลิกที่นี่เพื่อสมัครสมาชิก