響應按鈕看起來像是兩個按鈕：懸停

Question

我試圖讓窗體響應。

這樣做，如果我現在懸停在提交按鈕上似乎出現兩個按鈕？

Example fiddle

實施例圖像：

代碼：

.loudbutton:hover { cursor:pointer; 
width: 90%; 
height: 40%; 
background-image: url('http://www.workbooks.com/sites/default/files/image/submit-button-2015-light-2.jpg'); 
} 

Answer 1

問題是當圖像不夠大而無法填充整個元素時，它會重複圖像。

添加background-size: 100% 100%得到它填補了按鈕，而不是重複：

.loudbutton:hover { cursor:pointer; 
    width: 90%; 
    height: 40%; 
    background-image: url('http://www.workbooks.com/sites/default/files/image/submit-button-2015-light-2.jpg'); 
    background-size: 100% 100%; 
} 

不過，丹尼斯指出，這種形象可以很容易地用CSS這樣做，你會不會需要一個圖像文件。 Updated Fiddle without the image。

Answer 2

.loudbutton：懸停{光標：指針; url（'http://www.workbooks.com/sites/default/files/image/submit-button-2015-light-2.jpg'）cover; }

Answer 3

在懸停中設置的背景圖像不像按鈕那麼寬。 不使用背景圖片，您可以使用CSS實現相同的結果而不使用圖片，從而保存http請求。

Answer 4

改變CSS來

.loudbutton:hover { 
    background-repeat: no-repeat; 
    background-size: 100% 100%; 
}