CODEWITHSUNDEEP
htmlcss
Jonas
Jonas

Reputation: 311

Transparent PNG image doesn't regard background color, and acts as not transparent

HTML Code

<!DOCTYPE html>
<html>

<head>

    <title>My Website</title>

    <link href="style.css" rel="stylesheet" type="text/css" />

</head>

<body>
    <div id="center-box">
        <ul>
            <li id="fim"><img src="images/1.png" /></li>
            <li id="sim"><img src="images/2.png" /></li>
            <li id="tim"><img src="images/3.png" /></li>
            <li id="fom"><img src="images/4.png" /></li>
        </ul>
    </div>
</body>

</html>

CSS Code

html {
    height:100%;
}
body {
    background:black;
    border:1px solid white;
    margin:0; 
    padding:0;
    position:absolute;
    height:100%;
    width:100%;
    }
#center-box {
    border:4px solid white;
    color:white;
    position:absolute;
    width:250px;
    height:250px;
    left:50%;
    top:50%;
    margin-left:-150px;
    margin-top:-150px;
    background:grey;
    }
#center-box ul {
    list-style-type:none;
    margin:5px;
    padding:18px;
}
#center-box ul li {
    display:inline;
}
#center-box ul li:hover  {
    background-color:blue;
}

It only has a box in the middle of a page, and an inline list with images that are transparent (PNG). I want to make a transparent image change its background color by hovering on it, but it acts as the image is not transparent. How would you suggest to fix this?

Upvotes: 0

Views: 5861

Answers (5)

Jayx
Jayx

Reputation: 3966

Just out of curiosity ... have you tested this in older versions of IE?

The :hover pseudo class does not apply to all elements and inline-block can only be applied to inline elements (list items are block level) in IE7 and none in IE6.

I take it that you'll be using <a> inside your <li>; this should fix both issues (over-and-above the transparency issue of course).

Upvotes: 0

Micha&#235;l Perrin
Micha&#235;l Perrin

Reputation: 6238

I think you should use "inline-block" display for your li element in your CSS :

#center-box ul li {
    display: inline-block;
}

That way, the background will not only be applied on the text part of the area, but on the whole image.

Hope it helps!

Upvotes: 0

Fabian Barney
Fabian Barney

Reputation: 14549

For < IE7:
These browsers do not support PNG alpha transparency. However PNG-8 images with alpha transparency are rendered with full transparency. But truecolor PNG's alpha transparency appear grey when they get rendered.

So use PNG-8 images when possible and you're done. Otherwise you've to drop browser support or use workarounds like Shiv mentioned in his answer.

Upvotes: 0

Shiv Kumar Ganesh
Shiv Kumar Ganesh

Reputation: 3825

Actually there is an alpha transparency problem in IE6 with respect to the images with the PNG format. Since the support for the alpha channel was missing for these browsers there are some tags that can support your code.

If you want it through CSS

img {
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(...);
}

If you want it through JavaScript 

img.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(...)";

You can check the further pitfalls which these will have here

Upvotes: 1

Tianzhen Lin
Tianzhen Lin

Reputation: 2614

Transparent PNGs work well for me with background behind them as long as the browser is IE 7+. I suspect your PNGs may not be transparent.

Upvotes: 0

Related Questions