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

最新推荐文章于 2024-11-17 18:17:34 发布

原创最新推荐文章于 2024-11-17 18:17:34 发布 · 2.8k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序设置背景图

微信小程序开发专栏收录该内容

3 篇文章

订阅专栏

本文详细介绍了一个小程序页面的布局实现方式，包括使用相对定位、绝对定位和流式布局等技巧，展示了如何通过精确控制元素的位置和大小来创建美观且响应式的界面。

<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 = this
      wx.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>