Vấn đề:
khi viết css chúng ta dùng 2 mã màu dụng mã màu là Hexa và RGB, thường thì chúng ta sẽ viết theo 1 loại nhất định để đồng bộ. Tất cả các màu RGB đều có thể quy ra mã Hexa.
Nhưng với RGBA thì đó lại là 1 chuyện khác RGBA thực chất là mã màu RGB có thêm chỉ số alpha. Theo thông tin của W3C (World Wide Web Consortium: chuẩn web quốc tế – cho những ai chưa biết) thì chúng ta không có mã màu Hexa cho RGBA, trích dẫn:
Unlike RGB values, there is no hexadecimal notation for an RGBA value.
Vậy chúng ta sẽ dùng opacity thay cho chỉ số alpha, còn trong RGB ta có dùng opacity được hay không? và giữa alpha với opacity có gì khác nhau? và dùng trong những trường hợp nào?
Thử nghiệm 1: chúng ta sẽ so sánh thử màu khi dùng opacity và khi dùng chỉ số alpha xem chúng có gì khác nhau không
Ở đây ta dùng 4 thẻ:
Thẻ 1: màu xanh lá cây (có mã màu RGB(0, 128, 0) và mã Hexa: #008000)
Thẻ 2: thẻ này ta dùng chỉ số alpha là 0.5 => rgba(0, 128, 0, 0.5)
Thẻ 3: thẻ này ta dùng mã màu Hexa và thêm opacity 0.5 => #008000 – opacity: 0.5
Thẻ 4: thẻ này ta dùng mã màu RGB và thêm opacity 0.5 => rgba(0, 128, 0) – opacity: 0.5
Kết quả:
Ta nhận thấy 1 điều rằng màu xanh của 3 thẻ dùng cả opacity và alpha đều như nhau => opacity và alpha mang lại mức độ màu sắc ảnh hưởng như nhau
Nhưng số 3 và 4 lại mờ hơn số 1 và 2, lý do:
2 thẻ 3 và 4 chúng ta sử dụng thuộc tính opacity, khác với thẻ 2 (thẻ 2 ta dùng chỉ số alpha). Đây chính là điểm khác biệt giữa opacity và alpha.
Opacity sẽ làm ảnh hưởng đến tất cả thẻ con của nó
Alpha chỉ ảnh hướng duy nhất đến thẻ có chỉ số alpha
Thí nghiệm 2: chúng ta sẽ thử dùng opacity ở thẻ con để xem có thể lấy lại màu sắc ban đầu (trước khi opacity) ở thẻ cha được không.
Trong thí nghiệm này chúng ta dùng 3 thẻ:
Thẻ 1: thẻ nguyên mẫu, không có opacity (cả màu nền lẫn màu chữ)
Thẻ 2: thẻ cha dùng opacity 0.5, thẻ con dùng opacity 1
Thẻ 3: thẻ cha dùng opacity 0.5m thẻ con dùng opcity 0.5
Kết quả:
Ta nhận thấy ở thẻ 2 ngay cả khì dùng opcity bằng 1 cũng không thể lấy lại màu lúc đầu (giống thẻ 1). Ở thẻ 3, khi ta dùng opacity 0.5 tức là bằng với opacity ở thẻ cha (cũng 0.5) thì chữ còn mờ hơn ở thẻ 2. Kết luận, opacity ở thẻ con tính dựa vào màu của thẻ cha (sau khi đã dùng opacity)
khi dùng opacity, thì ngay cả khi bạn cho thẻ con của nó có opacity: 1 (tức là không có opacity) thì thẻ con cũng không thể có được trạng thái lúc đầu (có nghĩa là màu thẻ cha – ở đây thẻ cha có opacity 0.5 – là màu mặc định, browser sẽ tính opacity của thẻ con dựa trên màu của thẻ cha)
