Độ trong suốt với RGBA

Thuộc phần Tạo kiểu với CSS trong hành trình HTML của Coddy. Bài học 28 trên 76.

Trong CSS, màu RGBA là phần mở rộng của màu RGB, có thêm kênh alpha để xác định độ đục của màu. RGBA là viết tắt của Đỏ, Xanh lá, Xanh dương và Alpha. Tham số alpha là một số từ 0.0 (hoàn toàn trong suốt) đến 1.0 (hoàn toàn đục), cho phép bạn tạo màu có nhiều mức độ trong suốt khác nhau.

Đây là cú pháp cơ bản để dùng màu RGBA trong CSS:

selector {
    color: rgba(red, green, blue, alpha);
    background-color: rgba(red, green, blue, alpha);
}

Ví dụ:

p {
    color: rgba(255, 0, 0, 0.5); /* Màu đỏ bán trong suốt */
    background-color: rgba(0, 255, 0, 0.3); /* Màu xanh lá bán trong suốt */
}

h1 {
    color: rgba(0, 0, 255, 0.7); /* Màu xanh dương bán trong suốt */
}

.overlay {
    background-color: rgba(0, 0, 0, 0.5); /* Lớp phủ màu đen bán trong suốt */
}

Thử thách

Dễ

Bạn được cung cấp một tài liệu HTML có tiêu đề <h3> và đoạn văn <p>. Nhiệm vụ của bạn là dùng thuộc tính background-color cùng hàm rgba() để tạo kiểu trong suốt cho các phần tử này. Hãy làm theo các bước sau:

Viết quy tắc CSS nhắm đến phần tử <h3>. Đặt màu nền thành blue bằng cách dùng rgba(0, 0, 255, 0.5) (độ trong suốt 50%).
Viết quy tắc CSS nhắm đến phần tử <p>. Đặt màu nền thành green bằng cách dùng rgba(0, 128, 0, 0.3) (độ trong suốt 30%).

Tự làm thử

<html>
<head>
    <title>Transparency with RGBA</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <h3>Did You Know?</h3>
    <p>The first computer programmer was Ada Lovelace in the 1800s!</p>
</body>
</html>