IE8 Transparent PNG issue

Question

I am trying to display a transparent PNG as background image (actually bootstrap image) on my page.

Now I want to display it with less opacity. But it is not displaying correctly (displays with some edges around the image)

I know it can be fixed with adding the background-color attribute.

But is there any other way to fix it. I have tried various Microsoft filter attributes... like

-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=10)";
  opacity: 0.1;

But does not help.

`IE7` and `IE8` supports transparent `PNG`. `IE6` and earlier not. And your `filer` works fine In `IE8`. — m1k1o, Aug 13 '13 at 08:10
Shall we assume that it's displaying correctly in other browsers? — Álvaro González, Aug 13 '13 at 08:11
possible duplicate of [PNG Transparency Problems in IE8](http://stackoverflow.com/questions/1251416/png-transparency-problems-in-ie8) — Liam, Aug 13 '13 at 09:21

Ali Çarıkçıoğlu · Answer 1 · 2013-08-13T09:17:51.050

3

Use this code instead. Remember it should be in the same order!

LIVE DEMO (WORKS EVEN FOR IE6)

.box:hover
{
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=10)";
    filter: alpha(opacity=10);
    -moz-opacity: 0.1;
    -webkit-opacity: 0.1;
    opacity: 0.1;
}

edited Aug 13 '13 at 09:17

answered Aug 13 '13 at 08:56

Ali Çarıkçıoğlu

1,304
1
12
21

IE8 Transparent PNG issue

1 Answers1