在我们的网页和APP中，按钮通常都是不可或缺的元素。它们可以与用户互动，响应用户的操作。在设计网站时，按钮的颜色和样式对于整个页面的美观度至关重要。为了让按钮更加美观、引人注目，我们可以给它添加背景图片。那么，在CSS中如何来实现呢？
使用background-image属性添加背景图片
CSS提供了`background-image`属性，它可以让我们把图片作为元素的背景。通过设置`background-image`属性的值为一个url指向图片的路径，我们可以在按钮中添加一张背景图片。
语法格式：
.btn {
background-image: url('path/to/image');
}
上面的代码，`btn`是指按钮的类名，`.btn`的背景图片将会显示在按钮上。
注意事项：
图片路径可以是相对路径或者绝对路径。相对路径指的是相对于当前样式文件的路径。绝对路径是指完整的图片路径。
如果你添加的是本地图片，那么你必须保证图片已经存在于本地服务器上。
如果你使用的是CDN上的图片，那么你的网络应该能够访问到这个CDN服务器。
如果图片不存在，那么浏览器会展示背景色而不是背景图。
实例：
让我们来看一个实例，在网页中添加一个带有背景图片的按钮：
.btn {
background-image: url("https://picsum.photos/200/300");
width: 200px;
height: 50px;
border: none;
color: #fff;
border-radius: 5px;
font-size: 16px;
font-weight: bold;
text-align: center;
cursor: pointer;
}
在这个例子中，我们添加了一个200x300像素的背景图作为我们的按钮的背景。此外，我们还定义了按钮的宽度、高度、边框、文字颜色、字体大小、字体加粗程度、文本居中及光标样式等。
如何修改背景图片的位置
我们可以使用`background-position`属性来控制背景图片的位置。默认情况下，背景图片的位置在左上角。你可以使用关键字来设置背景图片的相对位置。比如`top left`是默认值，`bottom right`会将背景位置从左上角移到右下角。
语法格式：
.btn {
background-image: url('path/to/image');
background-position: left top;
}
上面的代码将会把背景图片置于按钮的左上角。
示例：
现在我们来看一个代码片段，演示如何在不同位置放置背景图片：
.btn {
background-image: url("https://picsum.photos/200/300");
background-position: center;
width: 200px;
height: 50px;
border: none;
color: #fff;
border-radius: 5px;
font-size: 16px;
font-weight: bold;
text-align: center;
cursor: pointer;
}
.btn2 {
background-image: url("https://picsum.photos/200/300");
background-position: right bottom;
width: 200px;
height: 50px;
border: none;
color: #fff;
border-radius: 5px;
font-size: 16px;
font-weight: bold;
text-align: center;
cursor: pointer;
}
在这里，我们创建了两个按钮，并使用`background-position`属性将它们的背景图片分别放在了中心和右下角。
如何把背景图片重复
默认情况下，背景图片将会自动重复，这意味着如果你设置的背景图宽度和高度小于元素的宽度和高度，那么背景图片会在元素的边界内重复。
如果你不想让背景图片自动重复，可以用`background-repeat`属性。
语法格式：
.btn {
background-image: url('path/to/image');
background-repeat: no-repeat;
}
上面的代码将会取消背景图片的自动重复。
实例：
让我们来看一个实例，将背景图片在竖直方向上重复：
.btn {
background-image: url("https://picsum.photos/200/300");
background-repeat: repeat-y;
width: 200px;
height: 50px;
border: none;
color: #fff;
border-radius: 5px;
font-size: 16px;
font-weight: bold;
text-align: center;
cursor: pointer;
}
在这里，我们使用了`repeat-y`，使背景图片在竖直方向上重复显示。
如何给按钮添加自己的背景图集合
如果你不想设置一个背景图，而是使用多个背景图，那么你可以使用`multiple background images`，这里的重点是`background-image`属性允许指定多个背景图片。这个可以通过逗号分隔多张图片的url地址来实现。
语法格式：
.btn {
background-image: url('path/to/image1'),url('path/to/image2'),url('path/to/image3');
}
上述代码呈现了多个背景图。
实例：
让我们用实例来看看如何给按钮添加自适应背景图集合：
.btn {
background-image: url("https://picsum.photos/320/160"), url("https://picsum.photos/200/300");
background-position: center, right top;
background-repeat: no-repeat;
background-size: contain;
width: 320px;
height: 300px;
border: none;
color: #fff;
border-radius: 5px;
font-size: 16px;
font-weight: bold;
text-align: center;
cursor: pointer;
}
在给按钮添加自适应背景图集合的时候，我们需要注意以下几点：
`background-image`属性可以添加多个背景图片，它们会从后往前层叠。
通过`background-size`属性可以设置背景图的大小，`cover`选项可以自适应比例放大图片并裁剪成和背景的宽高相等。
使用`background-position`控制多个背景图片的位置。
结语：
在CSS中添加背景图片是一种很常见的美化按钮的方法。我们可以通过`background-image`属性控制单个背景图片，通过`background-repeat`属性取消自动重复，`background-position`属性控制图片位置及`background-size`属性对背景图片进行大小控制。
希望大家能够通过本篇文章理解如何给按钮添加背景图片，并在实际开发中运用。