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

您可以使用背景大小语法

以下可能会有帮助 http://www.w3.org/TR/css3-background/#the-background-size

Answer 2

首先，您应该将样式规则移动到外部.css文件中。它不仅可以让您的代码更容易阅读，而且可以更好地分离您的代码。

其次，除非您使用CSS3 background-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;

背景图像尺寸不符合指定的宽度和尺寸。高度

4 个答案: