Vấn đề minh bạch PNG trong IE8

Tôi đang gặp sự cố với hình ảnh PNG trong suốt hiển thị các tạo tác pixel được pha trộn màu đen xung quanh mép của phần không trong suốt của hình ảnh. Nó chỉ thực hiện điều này trong Internet Explorer và nó chỉ thực hiện nó từ một tệp Javascript mà nó được sử dụng.

Đây là những gì tôi đang nói về ... http://70.86.157.71/test/test3.htm(liên kết bây giờ đã chết) ... hãy để ý cô gái ở góc dưới cùng bên phải. Cô ấy có các đồ tạo tác xung quanh cô ấy trong IE8 (Tôi chưa thử nghiệm nó trong các phiên bản IE trước, nhưng tôi cho rằng nó có thể cũng vậy). Nó hoạt động hoàn hảo trên Firefox và Chrome. Hình ảnh được tải từ tệp Javascript để tạo hiệu ứng di chuột qua.

Nếu bạn tải toàn bộ hình ảnh một mình, nó hoạt động tốt. Đây là hình ảnh ... http://70.86.157.71/test/consultant2.png

Làm thế nào để khắc phục điều này?

Hình ảnh được tạo bằng Photoshop CS3.

Tôi đã đọc những điều về cách xóa Gama, nhưng điều đó dường như đã có trong các phiên bản trước của Photoshop và khi tôi tải nó trong TweakPNG, nó không có Gama.

ĐÃ SỬA!

Tôi đang vật lộn với cùng một vấn đề và vừa có một bước đột phá! Chúng tôi đã thiết lập rằng nếu bạn cung cấp cho hình ảnh màu nền hoặc hình ảnh, png sẽ hiển thị chính xác trên đầu trang. Đường viền đen đã biến mất, nhưng bây giờ bạn đã có một nền mờ và điều đó làm mất đi mục đích khá nhiều.

Sau đó, tôi nhớ một rgba sang tức là bộ chuyển đổi bộ lọc tôi đã xem qua. (Cảm ơn Michael Bester). Vì vậy, tôi tự hỏi điều gì sẽ xảy ra nếu tôi cung cấp cho sự cố của mình một nền tức là được lọc mô phỏng rgba (255,255,255,0), hoàn toàn mong đợi nó không hoạt động, nhưng hãy thử nó bằng cách nào ...

.item img {
    background: transparent;
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)"; /* IE8 */   
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);   /* IE6 & 7 */      
    zoom: 1;

}

Mau! Tạm biệt màu đen, và xin chào các kênh alpha đang hoạt động trong ie7 và 8. Làm mờ các pngs của bạn vào và ra hoặc tạo hoạt ảnh cho chúng trên màn hình - tất cả đều tốt.

Tôi đưa cái này vào một plugin jQuery để làm cho nó trở nên mô-đun hơn (bạn cung cấp gif trong suốt):

$.fn.pngFix = function() {
  if (!$.browser.msie || $.browser.version >= 9) { return $(this); }

  return $(this).each(function() {
    var img = $(this),
        src = img.attr('src');

    img.attr('src', '/images/general/transparent.gif')
        .css('filter', "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='crop',src='" + src + "')");
  });
};

Sử dụng:

$('.my-selector').pngFix();

Lưu ý: Nó cũng hoạt động nếu hình ảnh của bạn là hình nền. Chỉ cần áp dụng hàm trên div.

Tôi biết chủ đề này đã chết một thời gian, nhưng đây là một câu trả lời khác cho vấn đề nền png cũ của ie8.

Bạn cũng có thể làm điều đó trong CSS bằng cách sử dụng hệ thống lọc độc quyền của IE như sau:

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

BẢN GIỚI THIỆU

bạn sẽ cần sử dụng blank.gif cho hình ảnh 'đầu tiên' trong khai báo nền của mình. Điều này chỉ đơn giản là gây nhầm lẫn cho ie8 và ngăn nó sử dụng cả bộ lọc và nền bạn đã đặt, 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 khai báo nền chứ không hiểu bộ lọc, do đó chỉ sử dụng nền.

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

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

Cách khắc phục là đặt màu nền của phần tử <A>.

Vì vậy, như sau:

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

Trở 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: ...;

PNG trong suốt prоblеm trong IE8

Giải pháp của Dan đã làm việc cho tôi. Tôi đang cố làm mờ một div bằng hình nền. Lưu ý: bạn không thể làm mờ div trực tiếp, thay vào đó làm mờ hình ảnh bao bọc. Ngoài ra, hãy thêm các bộ lọc sau để áp dụng hình nền:

-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='image',src='assets/img/bgSmall.png')"; /* IE8 */   
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='image',src='assets/img/bgSmall.png');   /* IE6 & 7 */      

Xin lưu ý rằng các đường dẫn trong thuộc tính src của bộ lọc là tuyệt đối và không liên quan đến trang tính css.

Tôi cũng nói thêm:

background: transparent\9;

Điều này khiến IE bỏ qua phần khai báo trước đó của tôi về hình nền thực tế cho các trình duyệt khác.

Cảm ơn Dan !!!

vui lòng thử mã dưới đây.

 background: transparent\0/;
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='image',src='assets/img/bgSmall.png');   /* IE7 */      
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='image',src='assets/img/bgSmall.png')"; /* IE8 */   

Dan Tello sửa chữa đã làm việc tốt cho tôi.

Một vấn đề bổ sung mà tôi đã tìm thấy với IE8 là nếu PNG được giữ trong DIV có kích thước chiều rộng hoặc chiều cao CSS nhỏ hơn PNG thì kiểm tra cạnh màu đen được kích hoạt lại.

Sửa CSS chiều rộng và chiều cao hoặc xóa chúng hoàn toàn đã được sửa.

Tôi sử dụng bản sửa lỗi CSS thay vì JS để giải quyết lớp có góc tròn của mình bằng PNG trong suốt bên trong

Thử

.ie .w AnythingDivWrappingTheImage img {
nền: #ffaabb; / * đây phải là màu nền phù hợp với thiết kế của bạn thực sự * /
bộ lọc: sắc độ (#ffaabb); / * và giá trị này phải khớp với bất kỳ giá trị nào bạn đặt trong background-color * /
}

Điều này có thể yêu cầu nhiều công việc hơn trên ie9 hoặc mới hơn.

Tôi chỉ muốn thêm (vì tôi đã tìm kiếm vấn đề này và câu hỏi này xuất hiện đầu tiên) IE6 và các phiên bản khác làm cho độ trong suốt của PNG rất xấu. Nếu bạn có hình ảnh PNG trong suốt alpha (32bit) và muốn hiển thị nó trên một số nền phức tạp, bạn không bao giờ có thể thực hiện việc này một cách đơn giản trong IE. Nhưng bạn có thể hiển thị hình ảnh đó một cách chính xác trên một nền màu duy nhất, miễn là bạn đặt thuộc tính CSS của hình ảnh PNG (hoặc div) giống background-colorvới thuộc tính gốc background-color.

Vì vậy, điều này sẽ hiển thị màu đen khi hình ảnh phải trong suốt alpha và trong suốt khi byte alpha là 0:

<div style="background-color: white;">    
    <div style="background-image: url(image.png);"/>    
</div>

Và điều này sẽ hiển thị chính xác (lưu ý thuộc tính background-color trong div bên trong) :

<div style="background-color: white;">    
    <div style="background-color: white; background-image: url(image.png);"/>    
</div>

Phương pháp thay thế phức tạp cho phép hình ảnh alpha trên nền phức tạp được sử dụng AlphaImageLoaderđể tải lên và hiển thị hình ảnh có độ mờ nhất định. Điều này hoạt động cho đến khi bạn muốn thay đổi độ mờ đó ... Bạn có thể tìm thấy chi tiết vấn đề và giải pháp của nó (javascript) TẠI ĐÂY .

Kịch bản của tôi:

• Tôi đã có một hình nền có png alpha 24 bit được đặt thành liên kết neo.
• Mỏ neo đã được làm mờ khi di chuột bằng Jquery.

ví dụ.

a.button { background-image: url(this.png; }

Tôi thấy rằng áp dụng đánh dấu do Dan Tello cung cấp không hiệu quả.

Tuy nhiên, bằng cách đặt một khoảng trong phần tử neo và đặt hình nền cho phần tử đó, tôi đã có thể đạt được kết quả tốt bằng cách sử dụng đánh dấu của Dan Tello.

ví dụ.

a.button span { background-image: url(this.png; }