微信小程序使用img标签代替background:url()的解决方案

<template><div class="bargin-stage"><!--背景图--><img class="bg-img" src="../../../static/images/bg-img.jpg" :style="minHeight" alt=""><img class="line-box-img" src="../../../static/images/line-box.png" :style="minHeight" alt=""><!--内容容器--><div class="stage-box"><img class="banner" src="../../../static/images/banner.jpg" alt=""><!--可以根据内容动态增高背景--><!-- <ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li><li>27</li><li>28</li><li>29</li><li>30</li><li>31</li><li>32</li><li>33</li><li>34</li><li>35</li><li>36</li><li>37</li><li>38</li><li>39</li><li>40</li><li>41</li><li>42</li><li>43</li><li>44</li><li>45</li><li>46</li><li>47</li><li>48</li><li>49</li><li>50</li><li>51</li><li>52</li><li>53</li><li>54</li><li>55</li><li>56</li><li>57</li><li>58</li><li>59</li><li>60</li><li>61</li><li>62</li><li>63</li><li>64</li><li>65</li><li>66</li><li>67</li><li>68</li><li>69</li><li>70</li><li>71</li><li>72</li><li>73</li><li>74</li><li>75</li><li>76</li><li>77</li><li>78</li><li>79</li><li>80</li><li>81</li><li>82</li><li>83</li><li>84</li><li>85</li><li>86</li><li>87</li><li>88</li><li>89</li><li>90</li><li>91</li><li>92</li><li>93</li><li>94</li><li>95</li><li>96</li><li>97</li><li>98</li><li>99</li><li>100</li></ul>--></div></div>
</template><script>export default {data () {return {minHeight: ''}},components: {},methods: {},created () {let _this = thiswx.getSystemInfo({success (res) {_this.minHeight = `min-height:${res.windowHeight}px`}})}}
</script><style lang="scss">page {height: auto;width: 100%;background-color: #71ffbb;}//父容器相对定位承载一个背景图和一个内容box$rate: 750/640;.bargin-stage {width: 750rpx;height: 100%;position: relative;box-sizing: border-box;//背景图z-index:1.bg-img {width: 750rpx;height: auto;position: absolute;//脱离标准文档流left: 0;top: 0;right: 0;bottom: 0;z-index: 1;}//内容容器 z-index:2，所有内容均在此下完成.stage-box {width: 750rpx;height: 100%;position: relative;left: 0;top: 0;right: 0;bottom: 0;z-index: 3;background-color: rgba(255, 255, 255, 0);box-sizing: border-box;.banner {width: $rate*588rpx;height: $rate*350rpx;display: block;margin: 0 auto;padding-top: 4rpx;}}}
</style>

微信小程序使用img标签代替background:url()的解决方案相关推荐

微信小程序里面的标签和html标签的对比、微信小程序基础之常用控件
微信小程序和html5标签的区别: HTML5 微信小程序 <h1></h1>...<h6></h6> <p></p> < ...
微信小程序一些常用标签与html的对应关系
小程序中的常用标签也是就是我们常用的这些 view(视图容器).rich-text(富文本).swiper(滑块视图容器).icon(图标).text(文字).progress(进度条).button ...
微信小程序里面的标签和html标签做对比
一.微信小程序和html5标签的区别: 二.wxss 选择器 HTML5 微信小程序 div(标签选择器) view.text.icon.input.image.navigator(标签选择器) cl ...
微信可以识别哪些HTML语言,微信小程序一些常用标签与HTML的对应关系
参考地址: https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/ 微信小程序中的常用标签: view(视图容器). ...
微信小程序：video标签默认显示视频的第一帧作为封面
微信小程序:video标签默认显示视频的第一帧作为封面 <video src="video_url"controls="{{false}}"initial ...
微信小程序隐藏video标签的进度条组件
微信小程序隐藏video标签的进度条组件直接上代码 <video direction="0" show-fullscreen-btn="{{false}}&quo ...
微信小程序使用nginx跳转第三方url
先在微信公众平台配置号域名服务器域名和业务域名都配置好然后微信小程序使用 web-view标签进行跳转 <web-view src="https://你自己的域名/如果有参数带上& ...
微信小程序内容安全校验（遇到的问题解决方案）
微信小程序内容安全校验(遇到的问题解决方案) 怎么实现微信小程序内容安全校验我已经发布了,但是最近又遇到问题,校验等级. msgSecCheck检查一段文本是否含有违法违规内容:我运用实际中安全等级还 ...
微信小程序等待几秒、_微信小程序应用打开很慢怎么办？附解决方案
微信小程序应用打开已经是当下最热门的话题,下面将从多方面来谈谈微信小程序应用打开很慢怎么办?附解决方案相关的内容. 小程序科普类的文章已经很多了,今天这里讲的是针对小程序的优化方法,可以有效提高小程序 ...

微信小程序使用img标签代替background:url()的解决方案

微信小程序使用img标签代替background:url()的解决方案相关推荐

最新文章

热门文章