使用CSS調整div背景圖片的大小

Question

我正在使用網站的草稿版本，該版本使用比原始樣式更敏感的設計，並且遇到使我的CSS滾動效果導航欄按鈕正確調整大小的問題。 我可以讓div調整大小，但不能調整.png圖像本身。

以下是“主頁”按鈕的代碼。 我將div的大小調整為11.5％，因為當它顯示在其他按鈕旁邊時，它們都具有唯一的大小，並且非常適合父div。

任何幫助，不勝感激:)感謝您的光臨！

#homebut
{
display:inline-block;
width:158px;
height:40px;
max-width:11.5%;
max-height:100%;
text-align:center;
background:url(images/buttons/wawhomeroll.png) no-repeat 0 0;
background-position:center top;
background-size:auto;


}

#homebut:hover
{
background-position:0 -40px;
background-position:center bottom;

}

#homebut: span
{
position:absolute;
top: -999em;

}

Answer 1

作為評論background-size:100% auto;

#homebut {
   display:inline-block;
   width:158px;
   height:40px;
   max-width:11.5%;
   max-height:100%;
   text-align:center;
   background:url(images/buttons/wawhomeroll.png) no-repeat 0 0;
   background-position:center top;

   background-size:100% auto;

  }

Answer 2

嘗試background-size: cover; 。

Cover此關鍵字指定在確保背景圖像尺寸均大於或等於背景定位區域的相應尺寸的同時，將背景圖像縮放至盡可能小。