Cách lấy giá trị RGBa chính xác được đặt qua CSS qua Javascript?

Question

Trong hầu hết các trình duyệt tôi đã thử, các giá trị RGBa dường như bị thay đổi khi trình duyệt phân tích cú pháp CSS.

Ví dụ, CSS sau đây:

background-color: rgba(255, 0, 0, 0.5); 

Cung cấp giá trị CSS sau khi truy cập thông qua jQuery.css ('background-color') hoặc CSSStyleDeclaration.getPropertyValue mẹ đẻ ('background-color'):

rgba(255, 0, 0, 0.498039) 

Dưới đây là một fiddle với nhiều ví dụ: http://jsfiddle.net/hgFEj/3/

Chrome và Safari cho kết quả khác nhau. Firefox có vẻ là trình duyệt duy nhất báo cáo giá trị chính xác như đã nhập. Đây có phải là lỗi hoặc do thiết kế không?

Answer 1

Nhận xét của Mark Hubbart là chính xác.

phá vỡ

32-bit màu thành bốn thành phần 8-bit, mỗi trong phạm vi 0-255: đỏ, xanh, xanh, và alpha. Chúng tôi thể hiện alpha hoặc độ trong suốt, dưới dạng phân số hoặc phần trăm vì nó giúp chúng tôi có những ý tưởng nhanh hơn về cách minh bạch. Đó là suy nghĩ thực sự tốt hơn là không rõ ràng (well, opacity) từ 100% trong suốt là 0, không 1.

Bây giờ, trao 255 là mẫu số cho alpha giá trị, không có cách nào để diễn tả 0,5 chính xác. Giá trị bạn thấy, 0,498039, xuất phát từ phần gần nhất, 127/255 (được làm tròn đến 6 chữ số thập phân). Safari trả về 0.496094 là 127/256 được làm tròn đến 6 chữ số thập phân, và với tôi dường như là một lỗi vì nó ngụ ý 257 giá trị. Tôi cũng nghi ngờ Firefox có thể báo cáo chính xác 0,5 trừ khi nó chỉ làm tròn đến 2 chữ số thập phân.

Bạn có thể giải quyết vấn đề này trong các trình duyệt khác nhau bằng cách tạo plugin jQuery, trên thực thi đầu tiên, kiểm tra xem giá trị nào được trả về với alpha 50% và điều chỉnh tất cả các phép tính tương ứng.

parseFloat(
    $('#divWith50PercentAlphaBackgroundStyle') 
     .css('background-color') 
     .split(',')[3], 
    10 
) 

Sau đó, với giá trị này trong tay, làm một switch vào nó chống lại các giá trị trình duyệt khác nhau trở lại, và chuyển đổi đúng với giá trị đúng gần nhất bạn đang mong đợi.