Rgba CSS

Có thể sử dụng hàm CSS

.header {
  background: rgba(0, 0, 0, 0.5); /* Black color with 50% alpha/opacity */
}

1 để cung cấp giá trị màu với độ trong suốt alpha khi sử dụng CSS. Nó cho phép bạn chỉ định giá trị màu RGB, cũng như giá trị alpha để xác định độ trong suốt của màu

Hàm

.header {
  background: rgba(0, 0, 0, 0.5); /* Black color with 50% alpha/opacity */
}

1 hoạt động giống như hàm

.header {
  background: rgba(0, 0, 0, 0.5); /* Black color with 50% alpha/opacity */
}

3 (ở chỗ nó chấp nhận giá trị RGB làm tham số), ngoại trừ

.header {
  background: rgba(0, 0, 0, 0.5); /* Black color with 50% alpha/opacity */
}

1 chấp nhận giá trị thứ tư — kênh alpha

Như thế này

Giá trị RGBA được cung cấp dưới dạng danh sách bốn giá trị được phân tách bằng dấu phẩy, đại diện cho các kênh màu đỏ, xanh lá cây, xanh lam và alpha tương ứng

Mỗi giá trị RGB có thể được cung cấp dưới dạng số nguyên hoặc theo tỷ lệ phần trăm. Giá trị số nguyên

.header {
  background: rgba(0, 0, 0, 0.5); /* Black color with 50% alpha/opacity */
}

5 tương ứng với giá trị phần trăm của

.header {
  background: rgba(0, 0, 0, 0.5); /* Black color with 50% alpha/opacity */
}

6

Tuy nhiên, trên kênh alpha, giá trị phải nằm trong khoảng 0. 0 (hoàn toàn trong suốt) đến 1. 0 (đục hoàn toàn)

Giá trị phần trăm cho kênh alpha không được hỗ trợ trong đặc tả CSS hiện tại (Mô-đun màu CSS Cấp 3 tại thời điểm viết). Tuy nhiên, tỷ lệ phần trăm được đề xuất trong Mô-đun màu CSS Cấp 4 (ở trạng thái dự thảo tại thời điểm viết bài này)

Ví dụ trang web

Đây là một ví dụ hoạt động về cách sử dụng hàm

.header {
  background: rgba(0, 0, 0, 0.5); /* Black color with 50% alpha/opacity */
}

1 để xác định màu cho trang web

Chạy

Trình chỉnh sửa ngăn xếp Trình chỉnh sửa ngăn xếp

Xem trước trình chỉnh sửa

Bạn có thể thấy rằng phần tử

.header {
  background: rgba(0, 0, 0, 0.5); /* Black color with 50% alpha/opacity */
}

8 trong suốt một phần (giá trị alpha của nó là

.header {
  background: rgba(0, 0, 0, 0.5); /* Black color with 50% alpha/opacity */
}

9)

Tinh chỉnh các giá trị alpha ở trên để xem ảnh hưởng của nó đối với độ trong suốt của từng phần tử

Ví dụ về biến thể Alpha

Đây là một ví dụ về cùng một màu được lặp lại nhiều lần (trên một hình nền), nhưng mỗi màu có một giá trị alpha khác nhau

Tất cả các giá trị khác đều giống nhau (i. e. đỏ, lục, lam giống nhau trên tất cả các hàng), chỉ có kênh alpha thay đổi

Điều này chứng tỏ rằng hình nền sẽ ít nhìn thấy hơn khi giá trị alpha tăng lên (các ngôi sao là hình nền)

Các quốc gia có tài năng hàng đầu

Toptal là công ty tài năng hoàn toàn từ xa lớn nhất thế giới

khách hàng phục vụ

Chúng tôi phục vụ Duolingo, Shopify và các khách hàng ưu tú khác trên khắp thế giới

Tổng số cam kết tài năng

Công việc đến với bạn. Làm việc từ xa. Tỷ lệ cạnh tranh và thanh toán đáng tin cậy

Của những tài năng hàng đầu thế giới

Ít hơn 3% trong số hơn 500.000 ứng viên được chấp nhận mỗi năm

Một trong những điều mà tôi thực sự quan tâm về CSS là chức năng mới. Nó sẽ cho chúng ta khả năng thực hiện các thao tác màu sắc ngay trong trình duyệt. Ví dụ: khi di chuột qua một nút, bạn có thể thay đổi màu bằng cách sử dụng thứ gì đó như

.elem {
  background: rgba(white, 0.5);
}

3 mà không cần sử dụng bất kỳ bộ tiền xử lý CSS nào như Sass

Nhưng vì sự hỗ trợ của các chức năng màu CSS này hiện nay là bằng không, chúng ta có thể tạm thời sử dụng PostCSS và biên dịch chúng thành các màu thông thường. Hoặc chúng ta có thể thử nghiệm và khám phá sức mạnh của các hàm màu CSS

.elem {
  background: rgba(white, 0.5);
}

4 để thay đổi màu sắc một cách nhanh chóng. Hãy xem làm thế nào chúng ta có thể sử dụng nó

Làm thế nào nó hoạt động

Trong một ứng dụng thiết kế, khi chúng ta đặt một hộp màu đen và trắng trên một hộp lớn hơn có nền màu xanh lam (Như trong ví dụ), kết quả sẽ có màu xanh nhạt hơn và đậm hơn tương ứng

Đó là bởi vì khi giảm độ mờ, các màu sẽ hòa trộn với nhau dựa trên màu trắng hoặc đen. Bạn có thể mong đợi điều gì sẽ xảy ra nếu chúng ta thay đổi nền xanh dương thành xanh lá cây không?

Như bạn thấy, bằng cách thay đổi màu nền thành màu xanh lá cây, các hộp nhỏ bây giờ trông khác hẳn. Chúng tôi có màu xanh nhạt và đậm. Chúng tôi cũng có thể thay đổi giá trị độ mờ để chọn màu đậm hơn hoặc nhạt hơn. Hãy làm việc với tiền đề cơ bản này để đi sâu vào một số ví dụ thực tế

Áp dụng khái niệm

Để giữ cho ví dụ trên ngắn gọn, chúng tôi đã sử dụng độ mờ. Trong thiết kế thực tế của chúng tôi, chúng tôi sẽ cần sử dụng giá trị alpha

.elem {
  background: rgba(white, 0.5);
}

4

.header {
  background: rgba(0, 0, 0, 0.5); /* Black color with 50% alpha/opacity */
}

Chúng tôi sẽ sử dụng nền thay vì độ mờ ở đây vì nếu chúng tôi sử dụng giá trị độ mờ, tất cả các phần tử con sẽ bị ảnh hưởng, đây không phải là điều chúng tôi muốn đạt được. Nếu chúng tôi sử dụng kênh alpha của thuộc tính nền, chúng tôi đảm bảo rằng chúng tôi sẽ chỉ cập nhật phần tử mà chúng tôi muốn thay đổi

Ghi chú. trong các bản demo, chúng tôi sẽ sử dụng chức năng Sass

.elem {
  background: rgba(white, 0.5);
}

4 để làm cho mọi thứ nhanh hơn. Ví dụ

.elem {
  background: rgba(white, 0.5);
}

sẽ được dịch sang

.elem {
  background: rgba(255, 255, 255, 0.5);
}

Chủ đề một tiêu đề trang web

Trường hợp sử dụng đầu tiên cho

.elem {
  background: rgba(white, 0.5);
}

4 là tạo chủ đề cho tiêu đề ứng dụng web. Trong Trello, họ đang sử dụng màu nền với

.elem {
  background: rgba(white, 0.5);
}

4 cho các thành phần con của tiêu đề (logo, đầu vào tìm kiếm, các nút)

.search {
  background: rgba(255, 255, 255, 0.5); /* White with 50% alpha */
}

Với điều đó, chúng tôi sẽ có khả năng tạo chủ đề cho tiêu đề bằng cách chỉ thay đổi nền của nó và sau đó các phần tử con cũng sẽ thay đổi theo.

Trong ví dụ của chúng tôi, chúng tôi sẽ tạo một cái gì đó tương tự như tiêu đề Trello và chơi với nền từ các công cụ dành cho nhà phát triển

Lưu ý màu nền của các phần tử con khác nhau như thế nào trong 2 tiêu đề. Nếu chúng tôi muốn kiểm tra phần tử và thay đổi nền gốc, chúng tôi có thể tạo chủ đề cho tiêu đề của mình rất dễ dàng

Xem Tiêu đề bút của Ahmad Shadeed (@shadeed) trên CodePen

Tiêu đề bài viết

Trong ví dụ này, sử dụng

.elem {
  background: rgba(white, 0.5);
}

4 sẽ có lợi cho

• Đường viền ở cạnh trên và dưới
• Màu nền cho trình bao bọc ở giữa
• Màu nền cho liên kết danh mục

.elem {
  background: rgba(white, 0.5);
}

1

Xem Tiêu đề bài viết trên bút của Ahmad Shadeed (@shadeed) trên CodePen

nút

Khi tạo các nút theo chủ đề, chúng ta có thể sử dụng

.elem {
  background: rgba(white, 0.5);
}

4 để tạo hiệu ứng di chuột và lấy nét cho những thứ như đường viền, bóng đổ

.elem {
  background: rgba(white, 0.5);
}

3

Xem các nút bút của Ahmad Shadeed (@shadeed) trên CodePen

Độ dốc

Một trường hợp sử dụng hữu ích khác là thêm nền dưới dạng màu đơn sắc và sau đó sử dụng phần tử giả có màu

.elem {
  background: rgba(white, 0.5);
}

4 cho các điểm dừng màu chuyển sắc

.elem {
  background: rgba(white, 0.5);
}

5

Điều này cũng sẽ cung cấp cho chúng tôi khả năng tạo hiệu ứng chuyển màu bằng cách chỉ thay đổi màu nền

.elem {
  background: rgba(white, 0.5);
}

6

Xem Độ dốc bút của Ahmad Shadeed (@shadeed) trên CodePen

Yếu tố phụ

Nếu chúng ta có một danh sách điều hướng bên trong phần tử tiêu đề, chúng ta có thể thêm màu nền với

.elem {
  background: rgba(white, 0.5);
}

4 vào điều hướng. Điều này sẽ làm cho nền trong suốt một chút và do đó nó sẽ hòa trộn với nền gốc

Xem Phần tử phụ Pen của Ahmad Shadeed (@shadeed) trên CodePen

Và điều tương tự có thể được sử dụng để tạo hiệu ứng di chuột động

Xem Hiệu ứng Pen Hover của Ahmad Shadeed (@shadeed) trên CodePen

Các biến thể tối / sáng của bảng màu

Chúng ta có thể sử dụng khái niệm này để tạo ra các sắc thái khác nhau của một bảng màu cụ thể bằng cách định vị một phần tử giả trên mỗi hộp màu với một giá trị

.elem {
  background: rgba(white, 0.5);
}

4 cụ thể

Xem Bảng màu bút của Ahmad Shadeed (@shadeed) trên CodePen

Hiệu ứng hình ảnh

Nếu chúng ta muốn làm cho hình ảnh tối hơn hoặc sáng hơn, chúng ta có thể sử dụng phần tử giả với nền

.elem {
  background: rgba(white, 0.5);
}

4

Bằng cách sử dụng nền màu, chúng ta có thể tạo hiệu ứng pha màu. Ngoài ra, chúng tôi có thể sử dụng thuộc tính

.elem {
  background: rgba(255, 255, 255, 0.5);
}

5 để trộn nền với hình ảnh để chúng tôi có thể có các kết quả khác nhau

Điều quan trọng là phải kiểm tra các bảng hỗ trợ trước khi sử dụng

.elem {
  background: rgba(255, 255, 255, 0.5);
}

5

.elem {
  background: rgba(white, 0.5);
}

2

Nếu không hỗ trợ

.elem {
  background: rgba(255, 255, 255, 0.5);
}

5, hình ảnh sẽ bị đen và người dùng sẽ không nhận được. Nó tốt hơn để làm việc với các hiệu ứng như vậy như một sự nâng cao, nhưng đừng phụ thuộc vào nó. Để làm như vậy, bạn có thể sử dụng

.elem {
  background: rgba(255, 255, 255, 0.5);
}

8 hoặc Modernizr

.elem {
  background: rgba(white, 0.5);
}

5

Xem hình ảnh bút của Ahmad Shadeed (@shadeed) trên CodePen

Chủ đề với các biến CSS

Bằng cách sử dụng Biến CSS (thuộc tính tùy chỉnh) cho các phần tử cha, khi biến bị thay đổi thì tất cả các phần tử con sẽ bị ảnh hưởng. Ví dụ

.elem {
  background: rgba(white, 0.5);
}

0

.elem {
  background: rgba(white, 0.5);
}

1

Bằng cách kết hợp các Biến CSS và

.elem {
  background: rgba(white, 0.5);
}

4, chúng ta có thể làm cho bố cục và màu sắc của mình năng động hơn một chút mà không cần xác định lại màu mới cho từng thành phần

Xem Tiêu đề bút – Biến CSS của Ahmad Shadeed (@shadeed) trên CodePen

Những điều cần xem xét

Màu dự phòng

Mặc dù hỗ trợ toàn cầu cho các màu CSS là , nhưng điều quan trọng là phải cung cấp dự phòng cho các trình duyệt không hỗ trợ

.elem {
  background: rgba(white, 0.5);
}

2

Kiểm tra độ tương phản màu

Chúng ta nên đảm bảo rằng độ tương phản giữa các phần tử đáp ứng các nguyên tắc trợ năng. Đôi khi, sử dụng

.elem {
  background: rgba(white, 0.5);
}

4 có thể dẫn đến màu sắc kém và rất khó đọc. Bạn có thể sử dụng các công cụ như Lea Verou Contrast Checker để giúp xác định xem màu sắc có đáp ứng các tiêu chuẩn trợ năng hay không

RGBA trong CSS là gì?

Làm cách nào để áp dụng màu RGBA trong CSS?

CSS có hỗ trợ RGBA không?

255 255 255 là màu gì?