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

方法一:button 与 image 重叠

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

方法二:background-image

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

<button open-type=share class="share" style="background-image:url(https://example.com/imgs/icon_2_forward@2x.png);" 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),在整个网站的复用性很高且基本不会被更新。

方法四:button 嵌套 image

实例:

<button class="btn"><image src="/images/img.png"></image></button>
经验分享 程序员 微信小程序 职场和发展