คุณสมบัติพื้นหลัง CSS ใช้เพื่อเพิ่มเอฟเฟกต์พื้นหลัง สำหรับองค์ประกอบ
ในบทเหล่านี้ คุณจะได้เรียนรู้เกี่ยวกับคุณสมบัติพื้นหลัง CSS ต่อไปนี้:
style="color:crimson">สีพื้นหลัง
style="color:crimson">ภาพพื้นหลัง
style="color:crimson">พื้นหลังซ้ำ
style="color:crimson">สิ่งที่แนบมากับพื้นหลัง
style="color:crimson">ตำแหน่งพื้นหลัง
style="color:crimson">พื้นหลัง (คุณสมบัติชวเลข)
สีพื้นหลัง คุณสมบัติระบุสีพื้นหลังขององค์ประกอบ
สีพื้นหลังของหน้าถูกตั้งค่าดังนี้:
body {
background-color: lightblue;
}ลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightblue;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>This page has a light blue background color!</p>
</body>
</html>
เมื่อใช้ CSS สีมักถูกระบุโดย:
ชื่อสีที่ถูกต้อง - เช่น "สีแดง"
ค่า HEX - เช่น "ff0000"
ค่า RGB - เช่น "rgb(255,0,0)"
ดูค่าสี CSS เพื่อความสมบูรณ์ รายการค่าสีที่เป็นไปได้
คุณสามารถตั้งค่าสีพื้นหลังสำหรับองค์ประกอบ HTML ใดก็ได้:
ที่นี่ <h1>, <p> และ <div> องค์ประกอบจะมีสีพื้นหลังที่แตกต่างกัน:
h1 {
background-color: green;
}
div {
background-color: lightblue;
}
p {
background-color:
yellow;
}ลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
background-color: green;
}
div {
background-color: lightblue;
}
p {
background-color: yellow;
}
</style>
</head>
<body>
<h1>CSS background-color example!</h1>
<div>
This is a text inside a div element.
<p>This paragraph has its own background color.</p>
We are still in the div element.
</div>
</body>
</html>
ความทึบ คุณสมบัติระบุความทึบ/ความโปร่งใสขององค์ประกอบ สามารถรับค่าได้ตั้งแต่ 0.0 - 1.0 ค่าที่ต่ำกว่าจะยิ่งโปร่งใสมากขึ้น:
opacity 1
opacity 0.6
opacity 0.3
opacity 0.1
div {
background-color: green;
opacity: 0.3;
}ลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: green;
}
div.first {
opacity: 0.1;
}
div.second {
opacity: 0.3;
}
div.third {
opacity: 0.6;
}
</style>
</head>
<body>
<h1>Transparent Boxes</h1>
<p>When using the opacity property to add transparency to the background of an element, all of its child elements become transparent as well. This can make the text inside a fully transparent element hard to read:</p>
<div class="first">
<h1>opacity 0.1</h1>
</div>
<div class="second">
<h1>opacity 0.3</h1>
</div>
<div class="third">
<h1>opacity 0.6</h1>
</div>
<div>
<h1>opacity 1 (default)</h1>
</div>
</body>
</html>
หมายเหตุ: เมื่อใช้คุณสมบัติ ความทึบ เพื่อเพิ่มความโปร่งใสให้กับพื้นหลังขององค์ประกอบ องค์ประกอบลูกทั้งหมด สืบทอดความโปร่งใสเดียวกัน ซึ่งจะทำให้ข้อความภายในองค์ประกอบโปร่งใสทั้งหมดอ่านยาก
หากคุณไม่ต้องการใช้ความทึบกับองค์ประกอบย่อย ดังตัวอย่างข้างต้น ให้ใช้ค่าสี RGBA ตัวอย่างต่อไปนี้จะตั้งค่าความทึบของสีพื้นหลัง ไม่ใช่ข้อความ:
100% opacity
60% opacity
30% opacity
10% opacity
คุณได้เรียนรู้จากบทสี CSS ของเราว่าคุณสามารถใช้ RGB เป็นค่าสีได้ นอกจาก RGB แล้ว คุณสามารถใช้ค่าสี RGB พร้อมช่อง อัลฟา (RGBA) ซึ่งระบุความทึบของสี
ค่าสี RGBA ระบุด้วย: rgba(red, green, blue, alpha) ที่ พารามิเตอร์ alpha คือตัวเลขระหว่าง 0.0 (โปร่งใสเต็มที่) ถึง 1.0 (ทึบแสงเต็มที่)
เคล็ดลับ: คุณจะได้เรียนรู้เพิ่มเติมเกี่ยวกับสี RGBA ในบทสี CSS ของเรา
div {
background: rgba(0, 128, 0, 0.3) /* Green background with 30% opacity */
}ลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html>
<head>
<style>
div {
background: rgb(0, 128, 0);
}
div.first {
background: rgba(0, 128, 0, 0.1);
}
div.second {
background: rgba(0, 128, 0, 0.3);
}
div.third {
background: rgba(0, 128, 0, 0.6);
}
</style>
</head>
<body>
<h1>Transparent Boxes 2</h1>
<p>Result with opacity:</p>
<div style="opacity:0.1;">
<h1>10% opacity</h1>
</div>
<div style="opacity:0.3;">
<h1>30% opacity</h1>
</div>
<div style="opacity:0.6;">
<h1>60% opacity</h1>
</div>
<div>
<h1>opacity 1</h1>
</div>
<p>Result with rgba():</p>
<div class="first">
<h1>10% opacity</h1>
</div>
<div class="second">
<h1>30% opacity</h1>
</div>
<div class="third">
<h1>60% opacity</h1>
</div>
<div>
<h1>default</h1>
</div>
<p>Notice how the text gets transparent as well as the background color when using the opacity property.</p>
</body>
</html>
กำหนดสีพื้นหลังขององค์ประกอบ