Background color by css
Background-color is a feature in CSS used to define the background color of HTML elements. It is part of the style used in web design to determine the appearance of web pages. You can use background-color to change the background color of different parts of a web page, such as div, paragraph, or entire web page.
How to use:
Inline CSS: You can define background-color directly in HTML tags using the style attribute.
Code
< div style = "background-color: lightblue;" >
...Content...
< / div >
Internal CSS (Internal): You can define the style in the < style > section of the HTML document.
Code
< style >
DIV {
Background-color: lightblue;
}
< / style >
External CSS (External): You can create a separate CSS file, and link to an HTML document.
Code
< link rel = "stylesheet" type = "text / css" href = "styles.css" >
In the style.css file.
Code
DIV {
Background-color: lightblue;
}
Color values: Background-colors can be given in different ways, such as color names (such as "red," "blue"), hexadecimal color codes (such as "# FF0000"), RGB value (e.g." rgb (255, 0, 0) "), or HSL value (e.g." hsl (0, 100%, 50%) ").
Example:
Code
< div style = "background-color:# 00FFFF; ">
This div has a cyan background.
< / div >
< div style = "background-color: rgb (255, 0, 0);" >
This div has a red background.
< / div >
ถ้าใครค้นหาเรื่อง background color css แล้วลองทำตามแต่ยังงง ๆ ว่าควรใช้แบบไหน หรือทำไมสีไม่ขึ้น นี่คือสิ่งที่ฉันเจอบ่อยและวิธีแก้แบบง่าย ๆ (เอาไปใช้กับหน้าเว็บไซต์ได้เลย) 1) จะใส่สีพื้นหลังให้ “ทั้งหน้าเว็บ” ต้องใส่ที่ไหน? หลายคนใส่ให้ div แล้วคิดว่าทั้งหน้าจะเปลี่ยน จริง ๆ ถ้าจะให้พื้นหลังทั้งหน้าเปลี่ยน แนะนำกำหนดที่ body ตัวอย่าง: body { background-color: #00FFFF; } 2) ทำไม background-color ไม่แสดงผล? เช็กลิสต์เร็ว ๆ: - องค์ประกอบนั้นไม่มีความสูง/ไม่มีเนื้อหา (เช่น div ว่าง ๆ) สีเลยเหมือนไม่ขึ้น ให้ลองใส่ padding หรือกำหนด height - มี CSS ตัวอื่นทับ (specificity สูงกว่า) เช่น มี class หรือ id มาเขียนทับภายหลัง - ลืม link ไฟล์ external CSS หรือพิมพ์ชื่อไฟล์/พาธผิด ตัวอย่างให้ div เห็นพื้นหลังชัดขึ้น: .box { background-color: lightblue; padding: 16px; } 3) เลือกใช้ Inline / Internal / External แบบไหนดี? จากประสบการณ์ส่วนตัว: - Inline (style="...") เหมาะกับลองเร็ว ๆ หรือแก้เฉพาะจุด แต่ดูแลยากถ้าเยอะ - Internal (<style> ในหน้าเดียว) เหมาะกับหน้าเดียวจบ เช่น demo หรือหน้า landing ง่าย ๆ - External (ไฟล์ .css) เหมาะสุดสำหรับทำเว็บจริง เพราะจัดการง่ายและใช้ซ้ำได้หลายหน้า 4) รูปแบบค่าสีที่ใช้บ่อย (พร้อมทริค) - ชื่อสี: red, blue, lightblue (ง่ายแต่เลือกเฉดได้น้อย) - Hex: #FF0000, #00FFFF (นิยมมาก) - RGB: rgb(255, 0, 0) - HSL: hsl(0, 100%, 50%) (ปรับโทน/ความสว่างง่าย) ถ้าอยากให้สีพื้นหลัง “โปร่งใส” ให้ใช้ rgba() เช่น: background-color: rgba(0, 255, 255, 0.3); 5) ทำพื้นหลังไล่สี (gradient) ต้องใช้ background ไม่ใช่ background-color อันนี้เป็นจุดที่หลายคนสับสน: ถ้าอยากไล่สี ให้ใช้ background: linear-gradient(...) ตัวอย่าง: .hero { background: linear-gradient(90deg, #00FFFF, lightblue); } 6) ทำพื้นหลังเป็นรูปภาพร่วมกับสีพื้นหลัง ถ้าใส่รูปแล้วรูปโหลดไม่ขึ้น อย่างน้อยยังมีสีพื้นหลังรองไว้ได้: .banner { background-color: lightblue; background-image: url("bg.jpg"); background-size: cover; background-position: center; } สรุปสั้น ๆ: ถ้าต้องการแค่ “ทำสีพื้นหลัง” ให้ใช้ background-color ได้เลย เลือกเขียนแบบ External จะดูแลง่ายสุด และถ้าสีไม่ขึ้นให้เช็กเรื่องความสูงของกล่อง/การถูก CSS อื่นทับเป็นอันดับแรก