CSS背景圖像放置在：懸停

我有一個簡單的HTML/CSS列表，內嵌顯示。我使用列表的背景圖像和該列表的onhover命令的另一個變體。CSS背景圖像放置在：懸停

關於懸停的背景圖像似乎並不正確。它顯示有點太大，似乎有一些默認的填充，

什麼是最好的方式來控制CSS的onhover命令的背景圖像的大小，填充和邊距？

在此先感謝

#navbar{ 
background-image: url('../images/navbar.png'); 
color: white; 
font: 20px arial,sans-serif; 
height: 45px; 
} 

#navbar a{ 
color: white; 
text-decoration: none; 
} 

#navbar ul{ 
list-style: none; 
margin:0; 
padding:0; 
} 

#navbar li{ 
border-right: solid 1px white; 
display: inline-block; 
height: 45px; 
line-height: 45px; 
padding: 1px 10px 1px 10px; 

} 

#navbar li:hover{ 
background-image: url('../images/navbar-selected.png'); 
} 

<div class="clear" id="navbar"> 
    <ul> 
      <li><a href="index.php">Home</a></li> 
      <li><a href="stock.php">Stock</a></li> 
     <li><a href="overview.php">Overview</a></li> 
</ul> 
</div>

來源

2011-12-15 user866190

請上傳一個工作示例jsfiddle.net或類似的，它有點難以幫助沒有看到這個問題：） – 2011-12-15 13:47:01

你知道navbar.png是#navbar的背景嗎？不應該是#navbar li的背景嗎？ – ptriek 2011-12-15 13:51:31

你可以做這樣的：

#navbar li:hover{ 
background-image: url('../images/navbar-selected.png'); 
background-size: 50%; 
background-position: center; 
}

來源

2011-12-15 13:48:10 piebie

CSS背景圖像放置在：懸停

回答

相關問題