微信小程序 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>
上一篇:
uniapp开发微信小程序-2.页面制作
下一篇:
微信小程序获取openid的两种方法