Tôi có nên sử dụng độ trong suốt của PNG hoặc tính trong suốt của CSS không?Mức độ vượt trội, độ trong suốt của CSS hoặc Độ trong suốt PNG?
Bản năng đầu tiên của tôi là sử dụng CSS. Tuy nhiên tôi nghe ở đâu đó rằng bộ lọc trong IE chậm và tôi sẽ nhận được kết quả tốt hơn với PNG (bỏ qua IE6).
Tuy nhiên, từ kinh nghiệm cá nhân tôi biết rằng độ trong suốt PNG chậm trong FF3.
Có câu trả lời rõ ràng cho điều này không?
Cảm ơn.
Chúng là hai giải pháp khác nhau cho hai vấn đề khác nhau. Độ trong suốt của CSS (tôi cho rằng bạn đang đề cập đến thuộc tính độ mờ) sẽ làm cho toàn bộ phần tử (đường viền, nền và nội dung) trong suốt, trong khi alpha PNG trong suốt chỉ hữu ích trong các trường hợp bạn sử dụng hình ảnh. .
Tôi không thể nghĩ về nhiều tình huống mà bạn có thể sử dụng tác dụng tương tự.
Có tất nhiên RGBA colours in CSS3, tuy nhiên hỗ trợ trình duyệt hiện tại quá thấp để nó trở thành lựa chọn khả thi trong các trang web/ứng dụng công khai.
P.S. Tôi không thể nói rằng tôi đã chạy vào bất kỳ vấn đề hiệu suất alpha PNG FF3 bản thân mình.
theo dõi bình luận:
OK. Trong trường hợp đó tôi sẽ đi cho thuộc tính Opacity CSS.
Mặc dù hiệu suất bộ lọc có thể không tối ưu trong IE6, điều đó có nghĩa là bạn không phải lãng phí băng thông và yêu cầu HTTP bổ sung trên hình ảnh. Thêm vào đó, nếu bạn muốn có được hình ảnh để làm việc trong IE6 cũng như bạn phải sử dụng AlphaImageLoader, mà tôi chắc chắn sẽ chỉ là chậm (nếu không chậm hơn) so với bộ lọc alpha.
Tôi đang đặt lớp phủ trong suốt trên một số thành phần và trong trường hợp này, cài đặt hình nền phần tử lớp phủ hoặc cài đặt độ mờ sẽ hoạt động. Câu hỏi của tôi đề cập đến tốc độ của một trong hai giải pháp trong hầu hết các trình duyệt. Cảm ơn. –
Trả lời câu trả lời (quá dài). –
Tốc độ tôi đang nói đến là tốc độ hiển thị, không tải tốc độ, mà trong tình huống của tôi ít quan trọng hơn nhiều. Khi cuộn hoặc hiển thị (IE, sử dụng JS để ẩn/hiện), có đúng là PNG hoạt động tốt hơn bộ lọc độ mờ trong IE7. Nếu tôi phải làm vậy, tôi sẽ sử dụng một css khác cho lớp cho IE/FF. –
Độ trong suốt PNG có thể làm những việc không thể - PNG kênh trong suốt có thể có mức độ minh bạch một phần khác nhau cho các phần khác nhau của hình ảnh, trong khi độ mờ CSS không thể thực hiện điều đó.
Vâng ... bạn * có thể * sử dụng các gradient CSS (có thể cùng với '-webkit-mask') –
Tôi vừa thực hiện một bài kiểm tra phi khoa học nhanh trong Firefox 3.0.11 trên mac.
Thử nghiệm của tôi là che phủ một div và cuộn lên xuống liên tục.
Một đã qua sử dụng css:
background: #000; opacity:0.8;
Các khác sử dụng một 24bit 10px PNG cùng.
tôi đo kết quả như sau với màn hình hoạt động (nên đoán, không chính xác)
Firefox 3.0.11
CSS opacity: khoảng 60% sử dụng CPU.
PNG: khoảng 20% mức sử dụng CPU.
Safari 4.0:
CSS opacity: xấp xỉ 80% (với đỉnh là 120%!)
PNG: xấp xỉ 76% (không có đỉnh tại tất cả)
Vì vậy, như xa như hiệu suất đi, nó có vẻ như PNG là người chiến thắng.
' Vì vậy, theo như hiệu suất hoạt động, có vẻ như PNG là người chiến thắng.' Trên máy Mac, ít nhất. Bạn đã thử nghiệm trên Windows chưa? – Moshe
Có lẽ im trả lời một chút trễ nhưng tôi nghĩ rằng nó khá rõ ràng, rằng các perfomance sẽ tốt hơn với một png - nếu bạn đo nó trong CPU. Nhưng tôi nghĩ vấn đề hiệu suất chính là kích thước img. Vì bạn có thể an toàn rất nhiều Byte bằng cách sử dụng .jpg Tôi nghĩ rằng nó tốt hơn để đi với opacity/rgba trong hầu hết các trường hợp. – davedadizzel
Mặc dù CSS có lẽ là cách "thích hợp" để đi, tôi nghĩ PNG là an toàn hơn, dễ dàng hơn và được triển khai tốt hơn.
có NHỚ LỚN trong IE (bao gồm 8) khi sử dụng png 24 bit! xin hãy cẩn thận.
tôi đã sử dụng pngs với một số jquery để trượt một số văn bản và kịch bản là chết chậm! Tôi đã xóa các png phông nền và kịch bản vẫn ổn.
+1 cho liên kết. – Moshe
Câu hỏi này * thực sự * cần ngữ cảnh. Và để hỏi một câu hỏi cụ thể. –