CSS：如何获得与按钮大小相同的按钮背景图像？

Question

我看了这个链接，不幸的是，它没有帮助我： How to make background image shrink proportionally to fit button size in javascript?

我想生成一个按钮，其背景将是一个图像。我希望CSS匹配图像大小，使其与按钮一样大。

这是我写的CSS：

button {
    border: solid;
    background-image: url("../img/download.png");
    background-size: 100%;
}

我不知道为什么，但我在按钮背景中看不到任何图像。你知道如何帮助我吗？

Answer 1

如果我了解你的话，请尝试background-size: cover;。祝你好运！

Answer 2

您可以做的是使用锚标记而不是按钮，并使其充当按钮。您可以做的另一件事是将按钮包裹在跨度之外，并将跨度设置为与按钮相关的大小。

Answer 3

如果您使用background-size，它将占用整个按钮大小并且工作完美，但在您的特定情况下，我认为您有一些其他样式表会覆盖您的按钮样式。

注意：

在这种情况下，请避免使用带有HTML标记的样式button它会影响页面中的所有按钮样式。要么给它一个特定的id或class，并使用它的风格。

这可能是您的问题，您正在使用button的样式，也许还有另一个样式表覆盖它。

<强>演示：

这是一个显示background-siz:100%;e完美运作的工作片段：

＆＃13;

＆＃13;

button.customBtn {
  border: solid;
  background-image: url("http://i.imgur.com/uRBtadp.jpg");
  background-size: 100%;
}

＆＃13;

<button class="customBtn">Click me!</button>

＆＃13;

＆＃13;

＆＃13;