微信小程序button组件运用图片作为背景

本文地址:http://www.rrusf.com.cn/news/4260.html
文章摘要:微信小程序button组件运用图片作为背景,淡然置之农村卫生准确度,析珪胙土眼屎里想。

发表日期:2018-04-18 09:05:12作者来源:方维网络浏览次数:128 标签: 北京赛车助赢软件    

微信小程序中的 button 组件在开发过程中经常用到,北京赛车助赢软件:并且会被赋予各种各样的背景颜色或者用图片作为背景。
下个是个人开发过程中遇到的运用图片作为背景的例子。
首先button 的主要属性有:
 
微信小程序BUTTON
 
 
如下:
Wxml:
<view class='fx-zx'>
<button opentype="contact" plain="{{plain}}"><image src='/images/icon-img5.png'></image></button>
</view>
 
Wxss:
.fx-zx{
position: fixed;
width: 141rpx;
height: 96rpx;
right: 40rpx;
bottom: 100rpx;
z-index: 2;
background-size: 100%;
}
.fx-zx button {
width: 141rpx;
height: 96rpx;
}
.fx-zx image{
width: 141rpx;
height: 96rpx;
}
这里设置了button的大小和作为背景的图片的大小。
效果如下:
按钮1
 
Js:
Page({
data: {
plain: true,
},
...
})
:这里是通过Js设置button本身的背景透明。
 
效果如下:
按钮2
 
因为 button 本身带有边框,和padding值,所以这里显示是不正常的。
下面在去除button的边框和padding值:
 
.fx-zx button {
width: 141rpx;
height: 96rpx;
border:none;
padding:0;
}
 
效果如下:
按钮3
 
到这里就实现了button的背景透明和运用图片作为背景了。

作者:方维网络前端工程师乐文庆

方维网络专注于微信小程序定制开发(点餐小程序、商城小程序、平台小程序)等,欢迎有需要定制小程序的客户咨询我们客服热线400-800-9385
如没特殊注明,文章均为方维网络原创,转载请注明来自http://www.rrusf.com.cn/news/4260.html

相关网站设计案例

相关推荐新闻

指定周期执行函数setInter...

大家都知道JS的setInterval指定周期执行函数,就是每隔一段时间执...

日期:2018-04-18 浏览次数:2

小程序开发swiper如何实现...

swiper是微信小程序自带的一个图片轮播组件,跟我们做网站用的图片...

日期:2018-04-18 浏览次数:51

方维网络:微信小程序的...

对于深圳几十万的中小企业来说,面对互联网或者移动互联网,它们最大...

日期:2018-04-18 浏览次数:51

方维网络:小程序目前的“冷...

深圳方维网络是一家专门从事网络方案提供的公司,公司的核心业务之...

日期:2018-04-18 浏览次数:66

谈谈微信小程序开发中遇到...

微信小程序从去年开始推出到现在,呈现爆发式的增长,而且还推出了小...

日期:2018-04-18 浏览次数:76

微信小程序用户登录授权开...

有很多小程序应用免不了使用会员与获取用户位置,这就需要使用微信...

日期:2018-04-18 浏览次数:106

微信小程序:制作星星评...

不管是商城、O2O等类型的小程序都需要用到评价,而星星评价是最常...

日期:2018-04-18 浏览次数:93

方维网络:有了APP、商城 为...

方维网络是一家位于深圳的、提供专业互联网解决方案的公司,从事AP...

日期:2018-04-18 浏览次数:82

微信小程序大潮下的实体...

微信小程序的出现悄然而又惊人,李克强总理也提出了“互联网+”的...

日期:2018-04-18 浏览次数:96

微信小程序模板消息推送详...

在如今科技发达的年代,大家每天都在接收大量的信息,如电话、短信...

日期:2018-04-18 浏览次数:287

微信小程序模板消息推送详...

在如今科技发达的年代,大家每天都在接收大量的信息,如电话、短信...

日期:2018-04-18 浏览次数:287

微信小程序如何运营推广 ...

很多人开发出了微信小程序后不知道怎么推广运营?其实微信小程序...

日期:2018-04-18 浏览次数:342

相关标签
微信小程序小程序小程序商城商城小程序微信小程序制作福田网站建设公司
网站建设解决方案
服装网站建设解决方案响应式网站建设方案集团上市公司网站建设解决方案