html - 背景画像が指定された幅と高さにサイズ変更されていない

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

background-size 構文を使用できます

以下が役立つかもしれません
http://www.w3.org/TR/css3-background/#the-background-size

Answer 2

まず、スタイル ルールを外部の .css ファイルに移動する必要があります。コードが読みやすくなるだけでなく、懸念事項がより適切に分離されます。

次に、CSS3background-sizeプロパティを使用しない限り、背景画像のサイズを明示的に設定することはできません。元の画像サイズの 100% になり、背景である要素のサイズとは完全に分離されます。

を使用するにはbackground-size、これを試してください: background-size: 150px 40px;. ただし、これは IE8 以下では機能しないことに注意してください。

Answer 3

次のように「display: block」を追加します。

<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 4

設定する必要があります

background-size: 150px 40px;