0

画像フィールドがあり、この画像にカーソルを合わせているときに透かしを入れようとしています。単純なimg：hoverを試しましたが、ホバー画像はまだメインのimgの下にあります。ホバー画像をメイン画像よりも高くするにはどうすればよいですか。

4

3 に答える 3

10

これを試してください - http://jsfiddle.net/2UQ6N/

<div>
    <img src="http://lorempixel.com/300/200" />
    <img src="http://cdn-img.easyicon.cn/png/270/27093.png" class="watermark" />
</div>

div {
    position: relative;
    display: inline-block;
}

div:hover img.watermark {
    display: block;
}

img.watermark {
    position: absolute;
    bottom: 0;
    right: 0;
    opacity: .6;
    display: none;
}
于 2012-07-11T14:25:10.297 に答える
0

画像を一番上に配置するには、position: relative を設定する必要があります。

<img src="images/image1" width="225" height="219" border="0"> 


<img src="images/image2" width="250" height="372" border="0" style="position: relative;>

したがって、あなたの :hover に position: を追加して、一番上の画像に相対的にします。

于 2012-07-11T14:25:57.140 に答える
0

ホバー イメージをドキュメント フローの後半に配置するか、ホバー イメージz-indexをカバーしているイメージよりも高くする必要があります。

人々が間違いなく言及するように、これは、人々が望むなら、あなたのイメージを手に入れることを止めるものではありません.

于 2012-07-11T14:24:08.497 に答える