8

ホバー時に使用して、何らかの乳白色のレイヤーを作成する画像の上に div がありbackground-color:rgba(255,255,255,0.1)ます。

Web サイトのクロス ブラウザー テストを行っているときに、rgba が IE8 でサポートされていないことに気付きました。だから私が望むのは、rgbaがサポートされていないときは乳白色のレイヤーをまったく持たないことです. 以下に、フォールバックとして試したものを示します。

1/ background-color:rgba(255,255,255,0.1);

2/ background-color:transparent; background-color:rgba(255,255,255,0.1);

3/ background-color:none; background-color:rgba(255,255,255,0.1);

3 回の試行すべてで、画像の上に完全に空白のレイヤーができました。どうすればこれを達成できますか?

4

2 に答える 2

3

以下でうまくいくと思います。

イメージをコンテナーにラップします。

<div class="img-overlay">
    <img src="http://placekitten.com/200/200">
</div>

次の CSS を適用します。

.img-overlay {
    border: 1px solid blue;
    float: left;
    position: relative;
}
.img-overlay:before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: white;
    filter: alpha(opacity=40); /* internet explorer */
    opacity: 0.4; /* fx, safari, opera, chrome */
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=40)"; /*IE8*/
}
img {
    display: block;
}

http://jsfiddle.net/audetwebdesign/DkRJs/でデモを参照してください。

アイデアは、絶対配置を使用して要素を画像上に配置し、不透明度プロパティを適用することです。

古いブラウザーが疑似要素をサポートしていない場合は、HTML コードに直接配置する必要があります。

注：元の質問を読み直して、間違った問題を解決したことに気付きました。ご不便おかけしてすみません。

IE8 の問題

これを IE8 でテストしたところ、filter完全な後方互換性を持たせるにはプロパティが必要であることがわかりました。

于 2013-09-16T15:56:26.363 に答える
1

理想的ではありませんが、繰り返しの背景画像として 1 ピクセル x 1 ピクセルの透明な png を使用できます。IE8 をターゲットにするために、IE の条件付きコメントを使用してこれを行うこともできます。

以下を使用することもできます。

img:hover{opacity:0.8}
于 2013-09-16T15:45:15.260 に答える