jquery - Html 按钮背景重复自身，但设置为大小 :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>