懸停按鈕圖像不適合所有菜單？

我有一個菜單，我必須使懸停效果，不能由CSS繪製，所以我用它作爲圖片。我的菜單對象是<li>對象大小不同， enter image description here 懸停按鈕圖像不適合所有菜單？

，我無法理解我怎樣才能使不同尺寸的圖像適合在<li>因爲<li>對象沒有定義的寬度。

我的代碼如下：

ul li:hover{ 

    background:url('../images/hover.jpg'); 
     width:100%; 


}

但將畫面設置爲<ul>規模不斷的重複，並在

2014-06-25 Guram

你試過background-size：100％？ –

嘗試背景重複：不重複;所以圖像只會出現一次 – bumbumpaw

嘗試background-size：100％或覆蓋; –

我已經找到了解決辦法。我裁剪了懸停圖像的中間部分，並裁剪了結尾和開始。我用中間作爲背景，並設置重複，然後把2 div與結束在開始position:absolute和left:0px;和right:0px;工作像一個魅力

2014-06-25 10:11:49 Guram

或者，你可以使用@字體面，包括具有字體支持這些字符，並擁有使用該字體的菜單項。然後，你可以有這樣的：

ul li:hover { 
    background-color: rgba(255, 255, 255, 0.1); 
}

2014-06-25 07:56:52

謝謝你的回答，但字體在這裏不是問題，它只是設置懸停的大小。並繪製在CSS是不可能的，由於側面的輪廓:) – Guram

您可以使用

background-size: 100% 100%;

2014-06-25 07:58:23

回答