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

.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 样式设置为图片内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 微信小程序中添加客服按钮contact-button功能

    小程序的客服系统,是微信做的非常成功的一个功能,开发者可以很方便的通过一行代码,就可实现客服功能. 1. 普通客服按钮添加 <button open-type='contact' session-from=''>客服-联系我们</button> 2. 悬浮客服按钮添加,图片自定义 大家看地图的有个客服图片图片资源.大家去iconfont 网站去找一个就可以了 index.wxml <button class="kf_button" open-type=&q

  • 微信小程序分享功能之按钮button 边框隐藏和点击隐藏

    先上图 样式设置: 在小程序社区看了下,说是伪类造成的.于是就重新定义下样式.然后就 ok 了. 总结 以上所述是小编给大家介绍的微信小程序分享功能之按钮button 边框隐藏和点击隐藏,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的.在此也非常感谢大家对我们网站的支持!

  • 微信小程序 Button 组件详解及简单实例

    微信小程序 Button 组件详解及简单实例

    微信小程序 Button 相关文章: 微信小程序 Button 微信小程序 radio 微信小程序 slider 微信小程序 switch 微信小程序 textarea 微信小程序 picker-view 微信小程序 picker 微信小程序 label 微信小程序 input 微信小程序 form 微信小程序 checkbox 实现实例效果图: 属性名 类型 默认值 说明 size String default 有效值default, mini type String default 按钮的样

  • 微信小程序（十四）button组件详细介绍

    微信小程序（十四）button组件详细介绍

    button按钮用的算是最普遍的组件之一. 主要属性: wxml <!--按钮默认样式,点击事件--> <button type="defaule" bindtap="clickButton">Defalut</button> <!--原始颜色,不可点击状态, 正在加载状态--> <button type="primary" disabled="true" loading=

  • 微信小程序button组件使用详解

    本文为大家分享了微信小程序button组件的使用方法,供大家参考,具体内容如下 展示效果图 button组件的常用属性 size:default.mini--default为块级按钮.mini为小按钮 type:primary.default.warn--primary提交成功.default默认灰色.warn警告色 plain:true.false--按钮是否镂空,背景色透明 disabled:true.false--是否禁用 loading:true.false--名称前是否带 loadin

  • 微信小程序中button组件的边框设置的实例详解

    微信小程序中button组件的边框设置的实例详解

    微信小程序中button组件的边框设置的实例详解 button的边框是用:after方式实现的,用户如果在button上定义边框会出现两条线,需用:after的方式去覆盖默认值. 如果设置了Button的背景色,没有用:after设置边框的颜色,则button的四个角会出现模糊的尖角.如下图所示: 如上图四个角会模糊..wxss代码如下: .clickEncryptBtn{ width:130px; border-radius: 3px; margin:20px auto; padding-to

  • 微信小程序button标签open-type属性原理解析

    这篇文章主要介绍了微信小程序button标签open-type属性原理解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 open-type (微信开放能力):合法值中的其中之一: getUserInfo说明:引导用户授权 而获取用户信息,可以从bindgetuserinfo回调中获取到用户信息 而按钮的bindgetuserinfo属性 说明:用户点击该按钮时,会返回获取到的用户信息,回调的detail数据与wx.getUserInfo返回的

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

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

    下面通过多种方法给大家介绍微信小程序 button 的样式设置为图片,具体内容如下所示: 方法一:button 与 image 重叠 将button设为 opacity:0 然后定位放在那副图片的上边. 方法二:background-image background-image.背景图片是不支持在css中被引用资源的,但可以使用网络资源. <button open-type='share' class="share" style="background-image:ur

  • 微信小程序 解决swiper不显示图片的方法

    微信小程序 解决swiper不显示图片的方法

    微信小程序 解决swiper不显示图片的方法 1.我说的swiper不显示图片是只有一个swiper的框,但不显示设置好的图片. 第一个要确定的是图片路径设置的正不正确,确定路径没有设置错,还有一个可能的原因就是,放swiper的这个页面(也就是这个wxml文件)没有在app.json里面的pages进行注册 确决的方法是: 找到项目下的app.json文件 在app.json的配置文件下的pages进行页面注册,像下面图片这样 小程序的文档也写了"小程序中新增/减少页面,都需要对 pages

  • 微信小程序实现动态设置页面标题的方法【附源码下载】

    微信小程序实现动态设置页面标题的方法【附源码下载】

    本文实例讲述了微信小程序实现动态设置页面标题的方法.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 ① WXML文件 <button bindtap="setBiaoTi1">标题1</button> <button bindtap="setBiaoTi2">标题2</button> <button bindtap="setBiaoTi3">标题3</button&g

  • 微信小程序使用image组件显示图片的方法【附源码下载】

    微信小程序使用image组件显示图片的方法【附源码下载】

    本文实例讲述了微信小程序使用image组件显示图片的方法.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 ① index.wxml 复制代码 代码如下: <image style="width: 300px; height: 300px; margin:10px;" mode="scaleToFill" src="{{imageSrc}}"></image> ② index.js Page({ data:{

  • 一文解决微信小程序button、input和image表单组件

    一文解决微信小程序button、input和image表单组件

    目录 一,button组件 补充:button 开发能力 二,input组件 三,image组件 四,API三大类 4.1 事件监听API 4.2 同步API 4.3 异步API 总结 一,button组件 第一个来介绍的就是button组件,我们可以发现它和HTML中的按钮标签同名,是的,该组件在WXML中也是充当按钮设置功能,不过,相比之下,button组件的功能可比后者多多了,下面我们来详细介绍一下,微信小程序给我们提供哪些button功能. type属性,用来设置按钮的样式类型,目前有三

  • 微信小程序模板与设置WXML实例讲解

    微信小程序模板与设置WXML实例讲解

    目录 一.WXML模板语法--数据绑定 二.WXML模板语法--事件绑定 三.WXML模板语法--条件渲染 1.wx:if 2.结合<block>使用wx:if 3.hidden隐藏 四.WXML模板语法--列表渲染 1.wx:for遍历数组 2.手动指定索引和当前项的变量名* 3.wx:key的使用 一.WXML模板语法--数据绑定 数据绑定的基本原则 在 data 中定义数据 在页面对应的.js文件中,把数据定义到data对象中,如下图在home页面中的home.js中定义home页面的d

  • 微信小程序淘宝首页双排图片布局排版代码(推荐)

    效果图: 使用技术主要是flex布局,绝对定位布局,小程序前端页面开发,以及一些样式! 直接贴代码,都有详细注释,熟悉一下,方便以后小程序开发! wxml: <view class="taobaolist"> <block wx:for="{{imagelist}}" wx:key="item"> <view class="taobao-list"> <view class="

  • 微信小程序wx.previewImage预览图片实例详解

    微信小程序wx.previewImage预览图片实例详解

    一.小知识 二.例子 1.wxml <span style="font-family:Comic Sans MS;font-size:18px;color:#333333;"><view class="container"> <view wx:for="{{imgalist}}" wx:for-item="image" class="previewimg"> <im

随机推荐