【小程序·小技巧】小程序图片当背景？图片背景就要花里胡哨！

本文主要是介绍【小程序·小技巧】小程序图片当背景？图片背景就要花里胡哨！，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

问题描述：
    很多时候单色的背景满足不了我开发花里胡哨的需求，使用图片开发又出现各种问题，问题有但不限：

1.图片无法覆盖到整个屏幕
2.图片图像就是不在中间
3.图片把组件挡住了
4.图片没挡住组件但是影响了事件的触发
5.图片没到背后去反而成为页面组件展示的一部分
6.等等

    我们先看下解决问题的预览：

示例图1

示例图2

示例图3：动图也可，效果更好

一堆问题一个对策，上代码！
视图层代码，wxml：

 <view><image class = "bk" src='/image/background.jpg' mode="aspectFill" ></image>
</view>

视图层的层叠样式设计wcss：

 .bk{width: 100%;height:100%;position:fixed;background-size: 100% 100%;z-index:-1;
}

注意：
1.组件必须位于wxml最上方。
2.如果没能位于图层最下面，更改z-index属性绝对值为更大的数。
3.如果逻辑不能独立，可以用block块包裹。

补：有些人可能也不会纯色的，纯色不需要视图层组件设置，直接层叠样式设计即可。
代码是：

page{background-color:#99CCFF;
}

上个示例图：

示例图4：纯色

后记：
    看了我直接小程序概念理解的都知道小程序包上传是有大小限制的，这些图片还是放到云端然后使用数据绑定显示更好。
解决方案：
在js页面下载为data

  data: {notInMotto :"必须登陆才可以浏览失物信息",userInfo: {},schoolBackground:"cloud://mychd-find-4s9do.6d79-mychd-find-4s9do-1301544649/系统媒体文件/长大背景/校本部教学楼.jpg"},

在前端页面用数据绑定实现展示：

	<view><image class="backgroundPic" src='{{schoolBackground}}' mode="aspectFill"></image></view>

前端css代码：

.backgroundPic{width: 100%;height:100%;position:fixed;background-size: 100% 100%;z-index:-1;
}

    要感谢最帅的lby同学成功解决了我们队参赛时的这个开发问题，之前我的图片一直被当成组件显示，也不能达到好的覆盖模式，lby赛高！

这篇关于【小程序·小技巧】小程序图片当背景？图片背景就要花里胡哨！的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---