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;

封面值指定背景图像的大小应如此它确保两个尺寸尽可能小大于或等于容器的相应大小。

Reference on MDN

示例代码：

＆＃13;

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;
}

＆＃13;

<button></button>

＆＃13;

Answer 2

我将代码更改为：

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

现在它可以正常工作，但不适用于background-size:cover

Html按钮背景重复，但设置为大小：100％

2 个答案: