Html 按钮背景重复，但设置为 size:100%

Question

我正在尝试为 HTML 中的按钮设置图像背景。我的 CSS 看起来像这样：

background-image: url("images/Home-Button.png"); 
background-size: 100% 100%;

这里是the image。这是 image display.

看起来背景重复了。这发生在我所有的按钮上。我怎样才能避免这种情况？

抱歉提供图片链接。这是我的第一个问题，所以我没有足够的积分来在 Stack Overflow 上显示图像。

Answer 1

使用这个：

background-size:cover;

The cover value specifies that the background image should be sized so that it is as small as possible while ensuring that both dimensions are greater than or equal to the corresponding size of the container.

Reference on MDN.

示例代码：

button {
  background:url(http://www.kafkabrigade.org.uk/wp-content/uploads/2011/07/button-pic.jpg) center / cover no-repeat;
  border:0;
  cursor:pointer;
  width:196px;
  height:220px;
}

<button></button>

Answer 2

我将代码更改为：

background-size: 100% 100%;
background-clip:padding-box;

现在可以用了，但是用 background-size:cover

就不行了

Html 按钮背景重复，但设置为 size:100%

Html Button background repeats itself, but is set to size:100%

html

css

jquery

button