下面通过多种方法给大家介绍微信小程序 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="/UploadFiles/2021-04-02/img.png">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="/UploadFiles/2021-04-02/kefu.png">//index.wxss
.pos{ position: absolute; top: 10px; left: 23px; opacity: 0; } .icon_kf{ width: 20px; height: 20px; display: inline-block; margin-top: 5px; } .dbtext{ line-height: 15px; color: #666; font-size: 12px; } //下面是最外层的view的样式,可以要也可以不要 .df_1{ -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; -webkit-tap-highlight-color: transparent; } .l_h15{ line-height: 15px; text-align: center; }总结
风云阁资源网 Design By www.bgabc.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
风云阁资源网 Design By www.bgabc.com
暂无评论...
更新日志
2024年09月23日
2024年09月23日
- 华少翌.2005-华少翌【中唱艺能】【WAV+CUE】
- 群星《十二女声Ⅱ》[WAV/CUE/分轨][527MB]
- 大自然音乐系列《漫步在山裡》[WAV/CUE/分轨][502.8MB]
- 大自然音乐系列《星光夜语》[WAV/CUE/分轨][453.3MB]
- 史依弘《史依弘交响乐京剧演唱专辑HQ》头版限量编号[WAV+CUE]
- 曼丽2020《女人三十风继续吹》HQCD[WAV+CUE]
- 曼丽2021《女人三十2雾之恋》HQCD[WAV+CUE]
- 隔壁老樊.2019-我曾【好听音乐】【FLAC分轨】
- 高林生.1993-牵挂你的人是我【白天鹅】【WAV+CUE】
- 洪卓立.2012-找个懂我的女孩(国专)【英皇娱乐】【WAV+CUE】
- 曼丽2022《女人三十3晚秋》HQCD[WAV+CUE]
- 曼丽2018《女人三十4冬天》HQCD[WAV+CUE]
- 柏菲-《好歌30年壹》限量开盘母带ORMCD[低速原抓WAV+CUE]
- 大自然音乐系列《水舞》[WAV/CUE/分轨][424.3MB]
- 大自然音乐系列《星光夜语》[WAV/CUE/分轨][453.3MB]