0

HTMLコード

<!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コード

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

ページの中央にボックスがあり、透明な画像（PNG）を含むインラインリストがあります。透明な画像にカーソルを合わせると背景色が変化するようにしたいのですが、画像が透明ではないので機能します。これをどのように修正することを提案しますか？

4

5 に答える 5

1

実際には、PNG形式の画像に関してIE6にはアルファ透明度の問題があります。これらのブラウザではアルファチャネルのサポートが欠落していたため、コードをサポートできるタグがいくつかあります。

CSSで必要な場合

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

JavaScriptで必要な場合

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

これらが持つであろうさらなる落とし穴をここでチェックすることができます

于 2012-07-10T09:04:35.350 に答える
0

透明なPNGは、ブラウザーがIE 7以降である限り、背景が背後にある場合にうまく機能します。PNGが透明ではない可能性があります。

于 2012-07-10T09:03:08.543 に答える
0

CSSのli要素には「インラインブロック」表示を使用する必要があると思います。

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

そうすれば、背景は領域のテキスト部分だけでなく、画像全体にも適用されます。

それが役に立てば幸い！

于 2012-07-10T09:05:21.203 に答える
0

<IE7の場合：
これらのブラウザはPNGアルファ透明度をサポートしていません。ただし、アルファ透明度のPNG-8画像は、完全な透明度でレンダリングされます。ただし、トゥルーカラーPNGのアルファ透明度は、レンダリングされると灰色で表示されます。

したがって、可能な場合はPNG-8画像を使用すれば、完了です。それ以外の場合は、ブラウザのサポートを終了するか、Shivが回答で述べたような回避策を使用する必要があります。

于 2012-07-10T09:12:27.803 に答える
0

好奇心から...古いバージョンのIEでこれをテストしましたか？

疑似クラスはすべての:hover要素に適用されるわけではなくinline-block、IE7ではインライン要素（リストアイテムはブロックレベル）にのみ適用でき、IE6では適用できません。

<a>私はあなたがあなたの中で使用するだろうと思います<li>; これにより、両方の問題が修正されるはずです（もちろん、透明性の問題を超えています）。

于 2012-07-10T10:41:29.113 に答える