Small micro-channel application development: Background Picture Settings

This link: https: //blog.csdn.net/michael_f2008/article/details/86543134
the development of small micro-channel program, can not be referenced directly in the local picture wxss file, the runtime will complain: "Pictures can not be obtained through local resources WXSS, pictures can use the network, or base64, or use <image /> tag. "

This introduces the use <image /> tag method
There are many online methods, I also tried a lot, also encountered some problems during. To sum up, only two steps:

1, adding a <image /> tag wxml file:

<! - Root Page tag ->
<View class = "Content">
<! - background.jpg file folder pics ->
<Image class = 'background' the src = "../../ pics / background.jpg "MODE =" aspectFill "> </ Image>
! <- page other portions ->
</ View>
. 1
2
. 3
. 4
. 5
. 6
2, in wxss file, add:

{Page
height: 100%;
}
.background {
width: 100%;
height: 100%;
position: Fixed;
background-size: 100% 100%;
Z-index: -1;
}
. 1
2
. 3
. 4
. 5
. 6
. 7
. 8
. 9
10
It is noted that z-index: -1, so that images can be placed in the bottom, will not affect other portions.