0

私はホバー効果を作成しているので、誰かがマウスオーバーしたときに画像のスキャンラインが表示されますが、オーバーレイ画像を画像と同じサイズにすることはできません。

このフィドルを見てください: http://jsfiddle.net/number8pie/wwmPL/

HTMLは次のとおりです。

<div class="container">
 <a href="#">
  <div class="overlay"></div>        
  <img src="http://www.mainlymunros.co.uk/images/green%20square.bmp" repeat>
 </a>
</div>

CSSは次のとおりです。

.container {
  position: relative;
  max-width: 200px;
}
img {
  width: 100%;
  position: relative;
  z-index: 1;
  padding: 7px;
  border: 1px solid #333;
}
.overlay {
  display: none;
  position: absolute;
  z-index: 5;
  width: 100%;
  height: 100%;
  margin: 8px;
  background: url(https://dl.dropbox.com/u/29825082/scanlines.png) repeat;
}

a:hover .overlay {
  display: block;
}

緑色のブロックにカーソルを合わせると、下部でスキャン ラインが重なり合っていることがわかります。この重なりを削除したいと考えています。

画像は動的で、ブラウザのサイズに応じてサイズが変わります。

誰にも何か提案がありますか？

4

2 に答える 2

1

問題は、高さ100％、幅100％を指定しているのに、マージンを指定していることです。あなたはそれが含まれているa要素の正確なサイズであると言っていますが、それからそれを少し押し下げます。

コンテナを追加し、画像のパディングと境界線を削除して、新しいコンテナに割り当てる必要があります。

<a href="#">
    <div class="image">
        <div class="overlay"></div>        
        <img src="http://www.mainlymunros.co.uk/images/green%20square.bmp"/>
    </div>
</a>

.container a { 
    display:block;
    padding:7px;
    border: 1px solid #333;
}
.image {
    position:relative;
    width:100%;
    height:100%;
    display:block;
}
img {
    width: 100%;
    position: relative;
    z-index: 1;
}
.overlay {
    display: none;
    position:absolute;
    z-index: 5;
    width: 100%;
    height: 100%;
    background: url(https://dl.dropbox.com/u/29825082/scanlines.png) repeat;
}

例：JSFiddle。

今のあなたの問題はあなたimg が正方形ではないということです。高さよりも幅が広い長方形の画像であるということは、幅が100％になるが、高さの一部が切り取られることを意味します。画像を正方形にするか、オーバーレイに同じアスペクト比を設定すると、これは完全に機能します。

于 2013-03-19T13:22:06.850 に答える
0

オーバーフローを作成するパディング プロパティ。画像と.overlayの両方の高さを変更してください

それでいい。

 fiddle :http://jsfiddle.net/wwmPL/2/

これで問題が解決することを願っています:)

于 2013-03-19T13:14:52.227 に答える