CODEWITHSUNDEEP
cssinternet-explorer-8png
copenndthagen
copenndthagen

Reputation: 50742

IE8 Transparent PNG issue

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.

Upvotes: 2

Views: 940

Answers (1)

Ali Çarıkçıoğlu
Ali Çarıkçıoğlu

Reputation: 1305

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;
}

Upvotes: 3

Related Questions