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

微信⼩程序button样式设置为图⽚的⽅法

下⾯通过多种⽅法给⼤家介绍微信⼩程序 button 的样式设置为图⽚，具体内容如下所⽰：

⽅法⼀：button 与 image 重叠

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

⽅法⼆：background-image

background-image。背景图⽚是不⽀持在css中被引⽤资源的，但可以使⽤⽹络资源。

<button open-type='share' class="share" style="background-image:url(https:///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

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

}

总结

到此这篇关于微信⼩程序 button 的样式设置为图⽚的⽂章就介绍到这了,更多相关⼩程序 button 样式设置为图⽚内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章希望⼤家以后多多⽀持！