ການຮຽນ CSS

CSS พื้นหลังใช้เพื่อกำหนดปรากฎการณ์พื้นหลังขององค์ประกอบ:

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

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

CSS background-color

background-color 属性กำหนดสีพื้นหลังขององค์ประกอบ:

Example

การตั้งค่าสีพื้นหลังของหน้าเว็บนี้ตั้งไว้ดังนี้:

body {
  background-color: lightblue;
}

Try It Yourself

ผ่าน CSS สีทั่วไปจะถูกกำหนดด้วยวิธีต่อไปนี้:

  • ชื่อสีที่เป็นที่นิยม - ตัวอย่าง "red"
  • ค่าเซ็กซตัน - ตัวอย่าง "#ff0000"
  • ค่า RGB - ตัวอย่าง "rgb(255,0,0)"

ดู CSS Color Valuesได้รับรายชื่อค่าสีที่อาจใช้ได้:

องค์ประกอบอื่น

คุณสามารถตั้งค่าสีพื้นหลังสำหรับองค์ประกอบ HTML ใดๆ:

Example

ที่นี่ องค์ประกอบ <h1>、<p> และ <div> จะมีสีพื้นหลังที่ต่างกัน:

h1 {
  background-color: green;
}
div {
  background-color: lightblue;
}
p {
  background-color: yellow;
}

Try It Yourself

ความชัดเจน / ความโอดุดง

ค่าโอปาคิตีกำหนดความชัดเจน/ความโอดุดงขององค์ประกอบ ค่าใช้ได้คือ 0.0 - 1.0 ค่าที่ต่ำขึ้น ความโอดุดงมากขึ้น:

โอปาคิตี 1
โอปาคิตี 0.6
โอปาคิตี 0.3
โอปาคิตี 0.1

Example

div {
  background-color: green;
  โอปาคิตี: 0.3;
}

Try It Yourself

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

ความชัดเจนของโอปาคิตีโรมาโรสเอ

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

100% โอปาคิตี
60% โอปาคิตี
30% opacity
10% opacity

From our ການຮຽນ CSS In this chapter, we learned how to use RGB as color values. In addition to RGB, you can also use RGB color values with alpha channels are used together (RGBA) - This channel specifies the opacity of the color.

RGBA color values are specified as: rgba(red, green, blue, alpha)。alpha The parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque).

Tip:You can find more information in our ການຮຽນ CSS Learn more about RGBA colors in this chapter.

Example

div {
  background: rgba(0, 128, 0, 0.3) /* Green background with 30% opacity */
}

Try It Yourself