div พื้นหลังโปร่งใส HTML มองเห็นด้านหลังจางๆ

div พื้นหลังโปร่งใส HTML มองเห็นด้านหลังจางๆ บทความนี้สอนเขียน HTML ร่วมกับคำสั่ง background-color ของ CSS เพื่อกำหนดให้พื้นหลังของ div หรือ elements ใดๆ ก็ตามเป็นพื้นหลังโปร่งใส สามารถเขียนโปรแกรมได้ดังนี้

ตัวอย่าง div พื้นหลังโปร่งใส HTML มองเห็นด้านหลังจางๆ

<style>
    .bg {
        background-color: blue;
        width: 200px;
        text-align: center; 
    }
    .box {
        background-color: rgba(255,255,255,0.7);
    }
    .box2 {
        background-color: rgba(255,255,255);
    }
    div {
        padding: 5px;
    }
</style>

<div class="bg">
    <div class="box">div พื้นหลังโปร่งใส</div>
    <div class="box2">div พื้นหลังไม่โปรงใส</div>
</div>

div พื้นหลังโปร่งใส HTML มองเห็นด้านหลังจางๆ จากตัวอย่างโค้ดสามารถอธิบายได้ดังนี้

1. div class box เป็นพื้นหลังโปร่งใส ด้วยคำสั่ง background-color: rgba(255,255,255,0.7) หมายความว่า กำหนดสีด้วยคำสั่ง background-color ให้กำหนดสีแบบ RGB คือ 255ม 255, 255 คือสีขาว และตัวเลข 0.7 ยิ่งตัวเลขน้อย พื้นหลังจะโปร่งใสมากขึ้น

2. div class box2 เป็นพื้นหลังไม่โปร่งใส ด้วย background-color: rgba(255,255,255) เหมือนกับ class box ต่างกันที่ไม่กำหนดค่า parameter ที่ 4 ทำให้พื้นหลังไม่โปรงใส