2020-12-22

微信小程序 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>

• 1

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

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

方法三：base64

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

方法四：button 嵌套 image

实例：

 <button class="btn"><image src="/images/img.png"></image></button>