2013-04-11 23 views
25

Bạn có nên sử dụng rgba(0, 0, 0, 0) hoặc rgba(255, 255, 255, 0) để minh bạch trong CSS không?Bạn có nên sử dụng rgba (0, 0, 0, 0) hoặc rgba (255, 255, 255, 0) để minh bạch trong CSS không?

Ưu và nhược điểm của mỗi loại là gì?

+0

một màu trắng và một là màu đen nếu bạn sửa đổi độ mờ đục bất kỳ. Nếu không thì nó vẫn trong suốt. Kịch bản bạn có là nơi mà điều này thậm chí còn xuất hiện như một câu hỏi? –

+4

"@JackManey" Tại sao nó lại quan trọng? "Tôi không biết. Đó là lý do tại sao tôi hỏi. – Joe

Trả lời

49

Tham số cuối cùng cho hàm rgba() là thông số "alpha" hoặc "độ mờ đục". Nếu bạn đặt nó thành 0, điều này có nghĩa là "hoàn toàn trong suốt" và ba thông số đầu tiên (các kênh red, greenblue) sẽ không thành vấn đề vì bạn sẽ không thể thấy màu sắc.

Với ý nghĩ đó, tôi sẽ chọn rgba(0, 0, 0, 0) vì:

  1. nó ít đánh máy,
  2. nó giữ một vài byte thêm ra của file CSS của bạn, và
  3. bạn sẽ thấy một vấn đề rõ ràng nếu giá trị alpha thay đổi thành thứ gì đó không mong muốn.

Bạn thể tránh mô hình rgba hoàn toàn và sử dụng từ khóa transparent thay vào đó, mà theo w3.org, tương đương với "minh bạch đen" và cần tính toán để rgba(0, 0, 0, 0). Ví dụ:

h1 { 
    background-color: transparent; 
} 

Điều này giúp bạn tiết kiệm được một vài byte trong khi ý định sử dụng độ trong suốt là hiển nhiên (trong trường hợp không quen thuộc với RGBA).

Kể từ CSS3, bạn có thể sử dụng từ khóa transparent cho bất kỳ thuộc tính CSS nào chấp nhận màu.

8

Có hai cách lưu trữ màu với alpha. Đầu tiên là chính xác như bạn thấy nó, với mỗi thành phần như là. Thứ hai là sử dụng trước khi nhân alpha, trong đó các giá trị màu được nhân với alpha sau khi chuyển đổi nó thành phạm vi 0.0-1.0; điều này được thực hiện để làm cho compositing dễ dàng hơn. Thông thường bạn không nên chú ý hoặc quan tâm đến cách nào được thực hiện bởi bất kỳ động cơ cụ thể nào, nhưng có những trường hợp góc mà bạn có thể, ví dụ nếu bạn cố gắng tăng độ mờ của màu. Nếu bạn sử dụng rgba(0, 0, 0, 0), bạn ít có khả năng thấy sự khác biệt giữa hai cách tiếp cận.

+4

Đây là câu trả lời đúng.Cụ thể, phần có nội dung "có trường hợp góc mà bạn có thể, ví dụ: nếu bạn cố gắng tăng độ mờ của màu" đặc biệt đúng khi làm việc với gradient, như mô-đun Giá trị hình ảnh [yêu cầu] (http: // www .w3.org/TR/css3-images/# color-stop-syntax) các màu gradient được tính toán trong không gian RGBA được nhân trước. Tuy nhiên, lưu ý rằng việc triển khai vẫn khác nhau giữa các trình duyệt - đặc biệt, một số phiên bản gần đây vẫn vi phạm yêu cầu đó trong thông số kỹ thuật (mặc dù công bằng, tôi tin rằng nó không được chỉ định cho đến bản sửa đổi gần đây). – BoltClock

1

Có một sự khác biệt nhỏ khi u sử dụng rgba (255.255.255, một), màu nền trở nên nhiều hơn và nhẹ hơn như giá trị của 'một' tăng 0,0-1,0. Khi sử dụng rgba (0,0,0, a), màu nền càng ngày càng đậm hơn khi giá trị 'a' tăng từ 0,0 đến 1,0. Có nói rằng, rõ ràng là cả hai (255,255,255,0) và (0,0,0,0) làm nền trong suốt. (255,255,255,1) sẽ làm cho nền hoàn toàn trắng, nơi (0,0,0,1) sẽ làm cho nền hoàn toàn màu đen.

+2

Điều này không thực sự trả lời câu hỏi và trong mọi trường hợp không chứa thông tin chưa được cung cấp bởi ít nhất một trong các câu trả lời khác cho câu hỏi này. –

+1

Làm thế nào bạn có thể nói rằng nó không trả lời câu hỏi! Tôi đã cố gắng giải thích khái niệm đằng sau rgba() để những ưu và nhược điểm có thể được hiểu. –

+2

Bạn đã giải thích những gì 'rgba (...)' làm, nhưng đó không phải là những gì OP đã hỏi. Chỉ cần nhìn vào các câu trả lời khác cho câu hỏi này, chúng hoàn toàn khác với câu hỏi của bạn. –