Màu RGB so với RGBa trong CSS (cái gì, tại sao, như thế nào)

Tìm hiểu về sự khác biệt giữa màu RGB và RGBa trong CSS và cách bạn có thể sử dụng RGBa để tạo các thành phần giao diện người dùng đẹp, thu hút sự chú ý cho trang web của bạn.

RGB và RGBa là hai mô hình màu được sử dụng trong CSS, để thay thế cho việc sử dụng các giá trị màu Mã Hex (chẳng hạn như #282828 ).

Sự khác biệt giữa RGB và RGBa là gì?

• RGB là viết tắt của Red, Green và Blue
• RGBa là viết tắt của Red, Green, Blue và Alpha

Alpha là một minh bạch mà bạn có thể sử dụng để kiểm soát mức độ trong suốt của màu.

Nếu bạn bối rối, đừng lo lắng, điều đó sẽ có ý nghĩa sau một phút.

Để sử dụng RGB và RGBa, CSS cung cấp hai hàm màu rgb() và rgba() .

Cả hai hàm đều được sử dụng để thêm các màu nền từ 0 đến 255 trên thang màu đỏ, lục, lam.

Tuy nhiên, rgb() chỉ được sử dụng để thêm màu nền đồng nhất:

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

Trong khi đó, RGBa linh hoạt hơn nhiều so với RGB vì nó cũng cho phép bạn thêm độ trong suốt qua kênh alpha:

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

Tại sao thêm độ trong suốt cho màu nền lại hữu ích?

Ví dụ:giả sử bạn muốn thiết kế một Thẻ giao diện người dùng thu hút sự chú ý cho trang web của mình, chẳng hạn như sau:

Thẻ giao diện người dùng ở trên có:

• Hình ảnh thu nhỏ
• Lớp phủ
• Một số văn bản ở trên cùng.

Tôi đã sử dụng rgba() chức năng sử dụng kênh Alpha để kiểm soát mức độ hiển thị của hình nền so với văn bản. Tôi đã chọn màu đen trong suốt 50% cho lớp phủ Thẻ giao diện người dùng:

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

Tại sao tôi sử dụng độ trong suốt 50%?

Nó cũng có thể là 40% hoặc 60%. Tôi cũng có thể đã sử dụng một gradient tuyến tính với hai mức độ trong suốt khác nhau. Nó phụ thuộc vào kiểu giao diện bạn muốn.

Độ trong suốt của kênh alpha cao so với thấp:

• Giá trị kênh alpha càng thấp (như 0.1 ), càng trong suốt và hình nền càng hiển thị rõ ràng.
• Giá trị kênh alpha càng cao (như 0.9 ), thì hình nền càng kém trong suốt và càng ít hiển thị.

Như bạn có thể thấy trong phần so sánh bên dưới, giá trị kênh alpha ảnh hưởng đến khả năng đọc và tâm trạng của bản trình bày:

Bạn không muốn tạo lớp phủ quá nhạt hoặc quá tối.

Tất cả là về việc tìm ra điểm hấp dẫn phù hợp với cách bạn muốn giới thiệu nội dung của mình với người dùng.

Mã mẫu

Dưới đây là tất cả HTML và CSS từ ví dụ về Thẻ giao diện người dùng.

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;
}

Sử dụng nó làm tài liệu tham khảo hoặc điểm khởi đầu cho Thẻ giao diện người dùng của riêng bạn.