微信小程序的button组件是很常见的一个功能，它可以用来进行页面的跳转、提交表单等操作。常见的使用方式是给button组件设置文字作为按钮的显示内容，但其实我们也可以通过给button组件设置背景图片来实现更丰富的效果。

首先，我们需要准备一张背景图片。可以使用一张自己设计的图片或者选择一张素材图片，确保图片的尺寸和大小适合在小程序中使用。

接下来，我们需要在小程序的页面中使用button组件，并设置背景图片。在wxml文件中添加以下代码：

```html 按钮文本 ```

在上面的代码中，我们首先给button组件添加了一个自定义的class属性为"custom-button"，方便我们后续对按钮进行样式的自定义。然后，在button组件内部，我们使用了image组件来作为背景图片的容器，并设置了"button-image"的class属性。接着，我们使用了text组件来设置按钮的显示文本，并设置了"button-text"的class属性。

接下来，我们需要在wxss文件中对按钮进行样式的设置。在wxss文件中添加以下代码：

```css .custom-button { position: relative; width: 200rpx; height: 80rpx; margin: 20rpx auto; padding: 0; border: none; background: none; }

.button-image { position: absolute; top: 0; left: 0; width: ; height: ; }

.button-text { position: relative; z-index: 1; text-align: center; line-height: 80rpx; color: #fff; font-size: 30rpx; } ```

在上面的代码中，我们首先设置了按钮容器的样式，包括位置、宽高、边距、边框、背景等。注意，我们将边框和背景都设置为none，这样按钮就没有了默认的边框和背景颜色。然后，我们对背景图片容器的样式进行了设置，包括位置、宽高等。最后，我们对按钮的显示文本进行了样式的设置，包括位置、颜色、字体大小等。

最后，我们只需要将准备好的背景图片放置在小程序的图片资源文件夹中，并在代码中引用即可。在小程序的项目根目录下的images文件夹中放置一张名称为"button-bg.png"的图片。

以上就是使用图片作为背景来写微信小程序button组件的主要步骤。通过这种方式，我们可以根据需求自定义按钮的样式，从而达到更加丰富的效果。