微信小程序 button 的样式设置为图片

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/henryhu712/article/details/81625211

方法一：将button设为 opacity:0 然后定位放在那副图片的上边。

方法二：background-image。背景图片是不支持在css中被引用资源的，但可以使用网络资源。

<button open-type='share' class="share" style="background-image:url(https://example.com/imgs/[email protected]);" plain='true'></button>

wxss

.goBack .share{
  width: 38rpx;
  height: 36rpx;
  padding:0 20rpx;
  position: absolute;
  right: 32rpx;
  top: 0;
  bottom: 0;
  margin: auto;
  background-size: 38rpx 36rpx;
  background-repeat:no-repeat;
  border:none;
}

background-size与background-repeat与border:none;是button必须的

方法三：base64

什么情况下使用base64格式？条件：如果图片足够小且因为用处的特殊性无法被制作成雪碧图（CssSprites），在整个网站的复用性很高且基本不会被更新。