Làm thế nào để có được độ trong suốt PNG hoạt động trong các trình duyệt không hỗ trợ nó?

Question

Nhà thiết kế (yêu dấu) của chúng tôi tiếp tục tạo các tệp PNG có nền trong suốt để sử dụng trong các ứng dụng của chúng tôi. Tôi muốn đảm bảo rằng tính năng này của PNG hoạt động trong các trình duyệt "cũ hơn". Giải pháp tốt nhất là gì?

chỉnh sửa dưới đây

@mabwi & @syd - hay không Tôi đồng ý về việc sử dụng một PNG không phải là vấn đề. Đây là một vấn đề mà tôi cần phải giải quyết!

@Tim Sullivan - IE7.js trông khá tuyệt, nhưng tôi không nghĩ rằng tôi muốn giới thiệu tất cả các thay đổi khác của ứng dụng. Tôi muốn một giải pháp khắc phục vấn đề PNG độc quyền. Cảm ơn các liên kết.

Answer 1

Dưới đây là một bài viết tuyệt vời mà giải thích và cho thấy làm thế nào để xử lý PNG minh bạch trong các trình duyệt cũ: http://www.alistapart.com/stories/pngopacity/

Answer 2

Tôi có thể bị nhầm lẫn, nhưng tôi khá chắc chắn IE6 và ít hơn không làm minh bạch với các tệp PNG.

Tôi có hai "giải pháp" mà tôi sử dụng. Tạo tệp GIF có độ trong suốt và sử dụng các tệp đó ở mọi nơi hoặc chỉ sử dụng chúng cho IE 6 trở lên với các phiếu định kiểu có điều kiện. Cách thứ hai thực sự chỉ hoạt động nếu bạn đang sử dụng chúng làm nền, v.v.

Answer 3

IE7.js sẽ cung cấp hỗ trợ cho PNG (bao gồm cả độ trong suốt) trong IE6.

Answer 4

Tôi tin rằng tất cả các trình duyệt hỗ trợ PNG-8. Nó không pha trộn alpha, nhưng nó có nền trong suốt.

Answer 5

tôi đã tìm thấy những gì có vẻ là một giải pháp rất tốt ở đây: Unit Interactive -> Labs -> Unit PNG Fix

cập nhật Unit PNG cũng là đặc trưng trên list of PNG fix options on NETTUTS

Dưới đây là những điểm nổi bật từ trang web của họ:

• javascript rất nhỏ gọn: Dưới 1kb!
• Khắc phục một số sự cố tương tác gây ra bởi thuộc tính lọc của IE.
• Hoạt động trên đối tượng img và thuộc tính hình nền.
• Chạy tự động. Bạn không cần phải xác định các lớp học hoặc gọi các hàm .
• Cho phép các yếu tố chiều rộng tự động và chiều cao tự động.
• Siêu đơn giản để triển khai.

Answer 6

Tôi có thể nhầm lẫn, nhưng tôi khá chắc chắn IE6 và ít hơn không làm minh bạch với tệp PNG.

Bạn sắp xếp, và bạn sắp xếp không.

IE6 không có hỗ trợ nào cho chúng.

Tuy nhiên, IE đã hỗ trợ cho tùy chỉnh điên javascript/css và các đối tượng COM (đó là cách họ thực hiện ban đầu XMLHttpRequest)

Tất cả những hacks về cơ bản làm điều này:

• Tìm tất cả các hình ảnh png
• Sử dụng bộ lọc hình ảnh trực tiếp để tải chúng và tạo ra hình ảnh trong suốt ở một số định dạng nào đó mà IE hiểu được
• Thay thế hình ảnh bằng bản sao đã lọc.

Answer 7

Tôi đã sai lầm khi cố gắng tạo trang web bằng tệp .png và điều đó không đáng giá. Trang web trở nên chậm và bạn sử dụng các hack không hoạt động 100%. Dưới đây là một số good article on some options, nhưng lời khuyên của tôi là tìm cách tạo gif cho đến khi bạn không phải hỗ trợ IE6. Hoặc chỉ cung cấp cho IE6 một trải nghiệm suy thoái.

Answer 8

Sử dụng PNG trong IE6 hầu như không khó khăn hơn bất kỳ trình duyệt nào khác. Bạn có thể hỗ trợ tất cả trong CSS mà không cần Javascript. Tôi đã thấy thông báo lỗi này được hiển thị trước ...

div.theImage { 
    background : url(smile.png) top left no-repeat; 
    height  : 100px; 
    width  : 100px; 
} 

* html div.theImage { 
    background : none;  
    progid:DXImageTransform.Microsoft.AlphaImageLoader(src="layout/smile.png", sizingMethod="scale"); 
} 

Tôi không chắc chắn đây là CSS hợp lệ, nhưng tùy thuộc vào trang web, nó có thể không quan trọng quá nhiều.

(đó là đáng chú ý là các URL cho hình ảnh đầu tiên được dựa trên thư mục của các kiểu, nơi thứ hai là dựa trên các thư mục của trang được xem - vì vậy tại sao họ không phù hợp)

Answer 9

@ Hboss

đó là tất cả tiền phạt và dandy nếu bạn biết chính xác tất cả các tập tin (và kích thước của mỗi) mà bạn sẽ được hiển thị - nó sẽ là một nỗi đau hoàng gia để duy trì tập tin CSS, nhưng tôi cho rằng nó 'd có thể. Khi bạn muốn bắt đầu sử dụng PNG trong suốt cho một số mục đích rất phổ biến: a) đồ họa ngẫu nhiên như biểu tượng (có thể có kích thước khác nhau) hoạt động trên nền bất kỳ và b) nền lặp lại; sau đó bạn đang say. Mọi cách giải quyết mà tôi đã thử đã gặp trở ngại tại một thời điểm nào đó (không thể chọn văn bản khi nền trong suốt, đôi khi hình ảnh được hiển thị ở kích thước lập dị, v.v.) và tôi thấy rằng Tôi sẽ phải trở lại gifs.

Lời khuyên của tôi là cung cấp tính minh bạch PNG cho một cảnh quay, nhưng đồng thời nhận ra rằng nó hoàn toàn không hoàn hảo - và chỉ cần nhớ, bạn đang quay lưng lại cho người dùng một trình duyệt trên 7 tuổi. Những gì tôi làm ngày nay là cung cấp cho người dùng IE6 một cửa sổ bật lên trong lần truy cập đầu tiên của họ, với lời nhắc thân thiện rằng trình duyệt của họ đã lỗi thời và không cung cấp các tính năng theo yêu cầu của trang web hiện đại, và chúng tôi sẽ cố gắng hết sức để cung cấp cho bạn tốt nhất, bạn sẽ có được một trải nghiệm tốt hơn từ trang web của chúng tôi và internet như một toàn thể nếu bạn MÀU S W ĐƯỢC NÂNG CẤP.

Answer 10

• IE PNG Fix 2.0 hỗ trợ background-position và -repeat!

Cũng paletted 8-bit PNG với minh bạch alpha đầy đủ tồn tại, trái với những gì Photoshop và GIMP có thể làm cho bạn tin, và họ làm suy giảm tốt hơn trong IE6 - nó chỉ cắt giảm tính minh bạch để 1-bit. Sử dụng pngquant để tạo các tệp như vậy từ PNG 24 bit.

Answer 11

Một điều cần suy nghĩ là ứng dụng Email. Bạn thường muốn có độ trong suốt PNG-24 nhưng trong Outlook 2003 với một máy sử dụng IE6. Ứng dụng email sẽ không cho phép các thủ thuật CSS hoặc JS.

Đây là cách tốt để xử lý điều đó. http://commadot.com/png-8-that-acts-like-png-24-without-fireworks/

Answer 12

Nếu bạn xuất hình ảnh dưới dạng PNG-8 từ pháo hoa thì chúng sẽ hoạt động giống như hình ảnh gif. Vì vậy, chúng sẽ không trông nhợt nhạt và màu xám, tính trong suốt sẽ minh bạch nhưng chúng sẽ không có vẻ đẹp đầy đủ 24 bit mà các trình duyệt khác làm.

Có thể không hoàn toàn giải quyết vấn đề của bạn nhưng ít nhất bạn có thể nhận được một phần cách có chỉ được tái xuất khẩu chúng.