PNG8 viền đen trong IE

Question

Tôi gặp sự cố trong IE với hình ảnh PNG8 ở chỗ nó xuất hiện với đường viền đen bẩn lớn trong bóng tối của tệp * .png. (IE7, IE8)

Tôi đang sử dụng tính không đồng nhất và về cơ bản có bóng dưới hình ảnh nhỏ của tôi. Tất cả các trình duyệt đều làm cho điều này trở nên tốt đẹp, ngoại trừ IE làm cho bóng mờ như một vòng tròn màu đen?

Tôi cần hình ảnh "trong suốt" vì nó xuất hiện trên đầu trang của nhiều hình nền nhiều màu khác nhau, v.v ...?

Bất kỳ ý tưởng nào?

Answer 1

Tôi đã phải chịu đựng từ các vấn đề tương tự với opacity trong IE7, IE8 những gì bạn có thể làm là đưa ra hình ảnh png của bạn một background color đó sẽ loại bỏ các biên giới xấu xí từ hình ảnh .... Nó làm việc cho tôi

Answer 2

OK - Đã giải quyết vấn đề. Dường như JS của tôi đã chỉ định

filter: alpha(opacity=100); 

vào hình ảnh và đây là nguyên nhân khiến cho dấu đen xuất hiện khi tôi đã tạo hình ảnh alphatransparent trong mã hóa PNG8.

Answer 3

Tôi muốn cảm ơn câu trả lời và để thêm điều gì đó. Trong trường hợp cụ thể của tôi, tôi cần phải ghi đè lên một phong cách đó là:

filter: alpha(opacity=50); 

Thêm mã dưới đây tạo độ mờ đục của tôi đúng, nhưng nói thêm về vấn đề các cạnh màu đen:

filter: alpha(opacity=100); 

Đây là dòng đã lưu tôi bằng cách khắc phục vấn đề:

filter: 0; 

Tôi hy vọng điều này cũng giúp người khác!

Answer 4

Tôi bắt buộc phải trả lời. Tôi cũng đã giải quyết vấn đề này. Chỉ cần tóm tắt lại, trong IE7 và IE 8, hình ảnh PNG và GIF trong suốt trong các liên kết đôi khi có viền đen hoặc bóng xung quanh chúng.

Bạn cần kiểm tra để đảm bảo không có bộ lọc độ mờ trên những hình ảnh này. Tôi có độ mờ trên 100. Tôi đã thay đổi điều này thành

filter:0; 

Ghi chú cũng cho văn bản liên kết bị mờ, bạn cần chỉ định màu nền cho liên kết hoặc nếu không nó sẽ mờ và mờ.

Chết cho IE !!

Answer 5

này làm việc cho tôi với Opacity hoạt hình:

img{ 
    background: transparent; 
    -ms-filter: “progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)”; 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF); 
    zoom: 1; 
} 

Answer 6

Sau khi tìm kiếm giải pháp thay thế, tôi trở về với hình ảnh nguồn cho câu trả lời.

Dường như tệp 24 bit .png gây ra sự cố, nhưng phiên bản 8 bit hoạt động tốt. Tôi chưa nghiên cứu sâu về vấn đề này.

Các thiết lập trong Lưu Photoshop cho Web & Devices -dialog đã giúp tôi thoát khỏi những nét đen trong phim hoạt hình opacity:

PNG-8, Selective, Diffusion, minh bạch, Màu sắc: 256, Matte: Không, Không minh bạch Dither, Interlaced và Convert to sRGB với "Internet Standard RGB".

Answer 7

Tôi đã có điều tương tự xảy ra với PNG có độ trong suốt được đặt làm hình nền của một yếu tố <A> với độ mờ được áp dụng.

Khắc phục là đặt màu nền của thành phần <A>.

Vì vậy, sau đây:

filter: alpha(opacity=40); 
-moz-opacity: 0.4; 
-khtml-opacity: 0.4; 
opacity: 0.4; 
background-image: ...; 

Biến thành:

/* "Overwritten" by the background-image. However this fixes the IE7 and IE8 PNG-transparency-plus-opacity bug. */ 
background-color: #FFFFFF; 

filter: alpha(opacity=40); 
-moz-opacity: 0.4; 
-khtml-opacity: 0.4; 
opacity: 0.4; 
background-image: ...; 

Answer 8

Bạn có thể làm điều đó trong CSS mua sử dụng hệ thống lọc độc quyền của IE.

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='scale',src='pathToYourPNG');

DEMO

bạn sẽ cần phải sử dụng một blank.gif cho hình ảnh 'đầu tiên' trong tuyên bố nền của bạn. Điều này chỉ đơn giản là để gây nhầm lẫn ie8 và ngăn chặn nó từ việc sử dụng cả bộ lọc và nền bạn đã thiết lập, và chỉ sử dụng bộ lọc. Các trình duyệt khác hỗ trợ nhiều hình nền và sẽ hiểu được khai báo nền và không hiểu bộ lọc, do đó chỉ sử dụng nền.

Bạn cũng có thể cần phải chơi với sizingMethod trong bộ lọc để làm cho nó hoạt động theo cách bạn muốn.