สี RGB กับ RGBa ใน CSS (อะไร ทำไม อย่างไร)

เรียนรู้เกี่ยวกับความแตกต่างระหว่างสี RGB และ RGBa ใน CSS และวิธีที่คุณสามารถใช้ RGBa เพื่อสร้างส่วนประกอบ UI ที่สวยงามและดึงดูดความสนใจสำหรับเว็บไซต์ของคุณ

RGB และ RGBA เป็นโมเดลสีสองแบบที่ใช้ใน CSS ซึ่งเป็นทางเลือกแทนการใช้ค่าสีรหัสฐานสิบหก (เช่น #282828 ).

RGB และ RGBa แตกต่างกันอย่างไร?

• RGB ย่อมาจาก Red, Green และ Blue
• RGBa ย่อมาจาก Red, Green, Blue และ Alpha

อัลฟ่าคือ ความโปร่งใส ช่องที่คุณใช้ควบคุมระดับความโปร่งใสของสีได้

หากสับสน ไม่ต้องกังวล แป๊บเดียวก็เข้าใจ

ในการใช้ RGB และ RGBa CSS มีฟังก์ชันสีสองสี rgb() และ rgba() .

ทั้งสองฟังก์ชันใช้เพื่อเพิ่มสีพื้นหลังตั้งแต่ 0 ถึง 255 ในระดับสีแดง เขียว และน้ำเงิน

อย่างไรก็ตาม rgb() ใช้เพื่อเพิ่มสีพื้นหลังทึบเท่านั้น:

{   
    /* 100% solid green */
    background-color: rgb(0, 255, 0); 
}

ในขณะเดียวกัน RGBa นั้นมีความยืดหยุ่นมากกว่า RGB มากเพราะยังช่วยให้คุณเพิ่มความโปร่งใสผ่านช่องอัลฟา:

{   
    /* 50% green transparency */
    background-color: rgb(0, 255, 0, 0.5); 
}

เหตุใดการเพิ่มความโปร่งใสให้กับสีพื้นหลังจึงมีประโยชน์

ตัวอย่างเช่น สมมติว่าคุณต้องการออกแบบ UI Card ที่ดึงดูดความสนใจสำหรับเว็บไซต์ของคุณ เช่น:

การ์ด UI ด้านบนมี:

• ภาพขนาดย่อ
• โอเวอร์เลย์
• ข้อความบางส่วนอยู่ด้านบน

ฉันใช้ rgba() เพื่อใช้ช่องอัลฟ่าเพื่อควบคุมว่าควรเปรียบเทียบภาพพื้นหลังกับข้อความอย่างไร ฉันเลือกความโปร่งใสสีดำ 50% สำหรับโอเวอร์เลย์การ์ด UI:

.card-overlay {
    background-color: rgba(0, 0, 0, 0.5); /* 0.5 = 50% */
}

เหตุใดฉันจึงใช้ความโปร่งใส 50%

มันอาจจะเป็นเพียง 40% หรือ 60% ฉันยังสามารถใช้การไล่ระดับสีเชิงเส้นที่มีความโปร่งใสต่างกันสองระดับได้ ขึ้นอยู่กับว่าคุณต้องการลุคแบบไหน

ความโปร่งใสของช่องอัลฟาสูงและต่ำ:

• ค่าช่องอัลฟาที่ต่ำกว่า (เช่น 0.1 ) ยิ่งโปร่งใส และภาพพื้นหลังยิ่งมองเห็นได้ชัดเจนขึ้น
• ค่าช่องอัลฟายิ่งสูง (เช่น 0.9 ) ยิ่งโปร่งใสน้อยลงและภาพพื้นหลังยิ่งมองเห็นได้น้อยลงเท่านั้น

ดังที่คุณเห็นในการเปรียบเทียบด้านล่าง ค่าช่องอัลฟาส่งผลต่อความสามารถในการอ่านและอารมณ์ของการนำเสนอ:

คุณไม่ต้องการให้ภาพซ้อนทับสว่างหรือมืดเกินไป

มันคือทั้งหมดที่เกี่ยวกับการค้นหาจุดที่น่าสนใจที่สอดคล้องกับวิธีที่คุณต้องการนำเสนอเนื้อหาของคุณต่อผู้ใช้

โค้ดตัวอย่าง

ด้านล่างนี้คือ HTML และ CSS ทั้งหมดจากตัวอย่างการ์ด UI

HTML

    <div class="card">
      <div class="card-overlay"></div>
      <img class="card-thumbnail" src="/images/the-north-sea-denmark.png" />
      <div class="card-text">
        <h3 class="card-title">The North Sea of Denmark</h3>
        <p class="card-description">
          Explore the beautiful & dynamic North Sea of Denmark — where every day
          is a new experience.
        </p>
      </div>
    </div>

CSS

.card {
    position: relative;
    height: 400px;
    width: 400px;
}

.card-thumbnail {
    height: 100%;
    width: 100%;
    display: block;
    object-fit: cover;
}

.card-text {
    color: white;
    position: absolute;
    width: 80%;
    max-width: 300px;
    top: 70%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
}

.card-title {
    font-size: 1.45rem;
}
.card-description {
    font-size: 1.15rem;
    margin-top: 0.5rem;
    line-height: 1.4;
}

.card-overlay {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1;
}

ใช้เป็นข้อมูลอ้างอิงหรือจุดเริ่มต้นสำหรับการ์ด UI ของคุณเอง