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

本是古典何须时尚 2024-04-19 16:32 64阅读 0赞

<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="">
    
                
               
    
            </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>