背景圖像未按指定的寬度和高度設置大小

Question

我有一個鏈接標記，我要爲其添加背景圖像。現在我指定了背景的寬度和高度，即圖像的寬度和高度。問題在於瀏覽器不會將背景圖像調整爲指定大小，它會忽略它們。 這是我的代碼：有什麼建議嗎？

<div align="center" style="font-size: 14px; font-weight: bold; font-family: Arial, 
Helvetica, sans-serif;"> 
<a id="displayText" href="javascript:toggle();" title="UK referral system credits" 
    style="background: url(images/earnings.png) no-repeat center; width: 150px; 
    height: 40px;">Show my earnings</a> 
<iframe id="toggleText" style="display: none;" frameborder="0" height="700" 
    src="http://v4m.mobi/cwf/facebook/uk/user_temp_credits_earned.php"; target="_blank" 
    align="center" width="300" scrolling="Auto"; bgcolor="#C9D3DE"> </iframe> 
</div> 

謝謝

Answer 1

添加 「顯示：塊」 是這樣的：

<a id="displayText" href="javascript:toggle();" title="UK referral system credits" 
    style="background: url(images/earnings.png) no-repeat center; width: 150px; 
    height: 40px; display: block;">Show my earnings</a> 

Answer 2

您可以使用背景大小的語法

下面可能會有所幫助
http://www.w3.org/TR/css3-background/#the-background-size

Answer 3

首先您應該將樣式規則移動到外部.css文件。它不僅會讓你的代碼更易於閱讀，而且更好地分離問題。其次，除非您使用CSS3 background-size屬性，否則不能明確設置背景圖像的大小。它將是原始圖像大小的100％，並且完全獨立於背景元素的大小。

要使用background-size，請試試這個：background-size: 150px 40px;。請注意，這在IE8或更低版本中不起作用。

Answer 4

您需要設置

background-size: 150px 40px;