css - 画像をホバーしますが、背景はそのままにします

Question

背景画像をホバーすると、別の画像が表示されますが、背景画像は保持されます。基本的に、ホバーした画像の上に矢印を表示したいのですが、これが得られたものです:(以下のビットリンクを参照)。これは次のようになります: http://i44.tinypic.com/2vnm7au.jpg

http://bit.ly/18F2Cqd

助言がありますか？

Answer 1

CSS にエラーがあります。
まず、背景画像はあなたが持っていたものとは別の URL にあります。そして、あなたbackground-imageが書くべきところbackgroundに、省略形のプロパティがありました。

これらのエラーを修正した後、背景画像が元の画像よりも 2 ピクセル低く表示されていることがわかったので、矢印が同じ場所に表示されるように背景の位置を少し変更する必要がありました。

background: url("http://oi44.tinypic.com/2vnm7au.jpg") 0 -2px no-repeat;

修正されたフィドル: http://jsfiddle.net/MrLister/vR7st/3/

Answer 2

背景画像の上に画像を重ねたいとのご要望を承りました。オーバーレイされた画像は常に同じになります。

この場合、CSS は次のようになります。

.test {
    position: absolute;
    top: 8px;
    left: 20px;
    background: url("base.jpg");
    width: 250px;
    height: 200px;
}

.test:hover:after {
    content: '';
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    background: url("overlay.png");
    background-repeat: no-repeat;
}

ベースの背景が見えるように、オーバーレイ ファイルには透明な領域が必要です。

フィドル