微信小程序实现页面加入背景图片以及调节透明度

在微信小程序中有时候需要在页面加入背景图片以及调节透明度让我们的小程序变得更加美观，以下是代码实现：

1、WXML

  <view class="bg" ><image class="bg-image" mode="scaleToFill"></image></view>

2、WXSS

.bg{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:url(' ..图片地址.. ')
no-repeat #000;
background-size:cover;
z-index:-1;
}.bg-img{width : 100%;height : 100%;
}

这样就能加入背景图片啦！

3、调节背景图片透明度

只需要在 WXML 中加入 style=“opacity:{{1}}” 其中花括号里面的数字就是透明度选项，范围是 0-1

  <view class="bg"  style="opacity:{{1}}"><image class="bg-image" mode="scaleToFill"></image></view>

大家可以开始自己尝试加入背景图和调节透明度啦！

微信小程序实现页面加入背景图片以及调节透明度相关推荐

微信小程序，动态改变背景图片
前言,作为开发新人,最近在学习微信小程序,期间遇到不少问题,对问题的解决的方法进行记录,以供学习之用. 关于微信小程序的背景图片问题, 1.微信小程序不能使用本地的图片设置背景图片,即 <vie ...
【微信小程序】background-image设置背景图片
微信小程序通过background-image设置背景:只支持线上图片和base64图片,不支持本地图片: base64图片设置步骤如下:1.在转base64工具(自己百度下base64编码转换工具) ...
微信小程序css设置本地背景图片
微信小程序中,直接在css中直接使用本地图片为view设置背景图片: <style>div{width: 500px;height: 500px;}.box1{background-ima ...
微信小程序首次页面加载图片加载加载页面时候会闪一下
微信小程序图片加载 image标签如果不给高度加载页面时候会闪一下至于原因,我的理解是:小程序图片闪烁是因为图片没有高度,加载时从第最高高度变到最适合高度的过程,高度加载是需要一定时间计算的解 ...
微信小程序开发：设定背景图片
文章目录前言: 一.原因与解决方法二.其他设置背景图片的方式 1.获取网络图片 2.将图片转换成base64格式 3.使用image标签前言: 今天在开发小程序的时候用到背景图片设定功能,但请求 ...
微信小程序如何页面分享，如何图片长按识别二维码等问题汇总
1.小程序未授权时,页面信息如何隐藏 1.需求场景小程序在用户未授权的情况下,跳转到敏感信息页面,这时候该页面的内容要隐藏. 2.方案使用wx:if语句进行判断,具体代码如下: <templ ...
微信小程序webview页面使用painter生成海报
微信小程序webview页面使用painter生成海报因为要在webview下生成海报,需要使用cover-view,根据接口返回数据动态更新海报内容,微信小程序生成海报组件有wxa-plugin- ...
微信小程序使用image组件显示图片的方法
本文实例讲述了微信小程序使用image组件显示图片的方法.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 ① index.wxml 代码如下: <image style=" ...
微信小程序限制页面收藏
控制小程序允许页面收藏带来的影响微信小程序支持页面收藏.不支持隐藏收藏有些页面不允许直接进入,(控制–页面被收藏后能直接被访问–带来的影响) 方法一配置黑名单当重新打开小程序页面路径在黑名单里 ...

微信小程序实现页面加入背景图片以及调节透明度

微信小程序实现页面加入背景图片以及调节透明度相关推荐

最新文章

热门文章