微信小程序button样式设置为图片的方法_微信小程序button嵌套image - CSDN文库

122 浏览量更新于2023-05-04 评论 1 收藏 52KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源评论

资源推荐

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

下面通过多种方法给大家介绍微信小程序 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>

PS：下面看下微信小程序把客服按钮替换成自己想要的图片：下面看下微信小程序把客服按钮替换成自己想要的图片

正文：正文：

今天开发微信客服的功能，发现微信提供的</contact-button> 的默认图片样式是真的丑，所以想替换成自己想要的图片样

式，并且点击图片能够有同样的效果。下面看一下对比，微信小程序开发交流QQ群招人啦,群号(173683895)欢迎加入

做成这样之后是不是感觉舒服多了？废话不多说，直接上代码：

实现原理：把原生的contact-button组件设置透明并用绝对定位放在左边保证不占位置，再展示理想的图片放在contact-button

的位置

//index.wxml

<view class="df_1 l_h15">

<contact-button size="22" class='pos'></contact-button>

<image class="icon_kf" src="/images/kefu.png"></image>

<view class="dbtext">客服</view>

</view>

//index.wxss

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余1页未读，立即下载

评论0

weixin_38708223

粉丝: 5
资源: 915

会员权益专享

图片转文字

全年可省5，000元立即开通

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈