-1

當我懸停我的背景圖像時，我希望顯示另一個圖像但保留背景。基本上，我想要一個箭頭出現在徘徊的圖像上，但這是我得到的:(請參閱下面的鏈接）。這是它應該是什麼樣子：http://i44.tinypic.com/2vnm7au.jpg 懸停圖像但保留背景

http://bit.ly/18F2Cqd

有什麼建議？

來源

2013-08-19 user2695684

CSS3中，你可以添加多個BG圖像。 – Era

快速解決方案，製作兩倍大小的圖像。上半部分放置原始圖像，下半部分放置最終結果。使div等於創建圖像高度的一半，並更改背景位置懸停。 –

@RohanSood但是，我希望這種懸停效果可以影響上傳到特定圖庫的所有圖像。 – user2695684

您的CSS中存在錯誤。
首先，背景圖片位於您所擁有的另一個網址。你有background-image你應該寫background，速記屬性。

糾正這些錯誤後，我看到背景圖像顯示比原始圖像低2個像素，所以我不得不稍微更改背景位置以使箭頭出現在相同的位置。

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

修正小提琴：http://jsfiddle.net/MrLister/vR7st/3/

來源

2013-08-19 10:35:52

非常感謝。我嘗試了很多方法，以至於我犯了這些錯誤。非常感謝您的幫助。 – user2695684

我知道你想要在背景圖像上疊加圖像;並且覆蓋圖像將始終相同。

在這種情況下，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; 
}

疊加文件應該有一些透明的區域，使基地的背景可以看出。

fiddle

來源

2013-08-19 10:18:37 vals

懸停圖像但保留背景

回答

fiddle

相關問題