1

画像にカーソルを合わせた場合に、画像にオーバーレイを追加したかったのです。

私はたくさんの方法を試しましたが、画像が消えるか、同じままであるように見えます。

こんな感じ

<a id="icon"
  style="background: url(/images/layout/top/icon.gif); height:23px; width:23px; float:left; margin-right:3px;"
  href="page.php?pageid=123" title="Icon">
</a>

本当にそして本当に、私が求めているのは、より多くの画像を作成することなく画像を変更するための迅速な方法です。

したがって、画像にカーソルを合わせていない場合-元の画像画像にカーソルを合わせた場合-40％のカラーオーバーレイ？

よろしくお願いします。

私が試したこと：

a.thumbnail {
background-color:orange;
filter: Alpha(Opacity=40, Style=0); 
-moz-opacity: 40%; 
opacity: 0.4; 
}
4

4 に答える 4

2

これがオーバーレイされない小さなフィドルを作成しましたが、CSSだけを使用して同じ効果が得られます。さらに、楽しみのためにいくつかのCSSトランジションを投入しました。基本的に、疑似要素ホバーを介して表示される画像の背後にdivを作成します。このようにして、狂ったようにCSSの背景画像を作成しなくても、タグをドロップすることができます。アルファ版を交換するだけで、オーバーレイが逆に機能するようになります。

http://jsfiddle.net/wesleyterry/jwXvA/#base

それがあなたが探していたものであることを願っています。

于 2012-04-13T19:21:52.920 に答える
1

基本的に、オーバーレイの場合、高さと幅はおそらく同じになると想定できます。

このデモでは、誤って25サイズの画像を使用しました。23に変更してください

http://jsfiddle.net/raU2J/7/

<div class="overlay_wrapper">
   <a href="#"></a>
   <div class="overlay"></div>
   <img src="cake.jpg" />
</div>​


.overlay,
.overlay_wrapper a,
.overlay_wrapper {
  width: 25px;
  height: 25px;
  position: relative;
}

.overlay_wrapper a {
  position: absolute;
  z-index: 10;
  display: block;
}

.overlay {
  display: none;
  background: red;
  position: absolute;
  top: 0;
  left: 0;
  filter: Alpha(Opacity=40, Style=0); 
  -moz-opacity: 40%; 
  opacity: 0.4; 
  z-index: 9;
}​

jquery：

$(".overlay_wrapper").hover(
  function () {
    $(this).find('.overlay').fadeIn();
  }, 
  function () {
    $(this).find('.overlay').fadeOut();
  }
);
于 2012-04-13T18:17:20.953 に答える
0

これはシングルだけでは不可能ですが、コンテナ（スパンまたはdiv）に<a>入れることができます。<a>コンテナに目的の背景を指定し、a:hoverのような背景色を指定しrgba(255, 255, 255,.4)ます。

それが希望どおりに機能しない場合は、要件について詳しく説明してください。

于 2012-04-13T18:19:06.350 に答える
0

サンプルデモ：

html

<div class="img"><div class="overlap"></div></div>

css

.img {width:100px;height:100px;background:red;position:relative;}
.overlap { visibility:hidden;}
.hover .overlap {position:absolute;top:0;left:0;width:100px;height:100px;background:#333;filter:alpha(opacity=40); /* for IE */  -moz-opacity:0.4; opacity: 0.4;-khtml-opacity: 0.4; visibility:visible;}
于 2012-04-13T18:37:12.347 に答える