CSS如何解决背景图随父盒子高度变化而拉伸或收缩的问题

前两天写了个盒模型,遇到了父盒子的背景图片因子盒子的撑开而拉伸,或是因子盒子的缩短而收缩的情况,不开心!

怎么解决呢?

父盒子未设定固定高度,完全靠动态获取的子盒子的高度变化来决定它的最终高度.

在这种情况下,背景图的background-size属性如果设置的宽高同父盒子宽高,以100% 100%来展示,那么势必会出现文章开头那种背景图大小也呈动态展示的后果!所以,这里,给高度设定一个固定值! 

我这里把background-size: 100% 700px;(700px的值根据实际情况确定,在后台可以自行调试设置)

rem也不行哦,必须px!

详细代码如下:

        <!-- html部分 -->
        <div class="father">
               <div class="son"></div>
        </div>

        
        // CSS部分
        
        .live {

            width: 100%;
            height: auto;
            position: relative;
            box-sizing: border-box;
            overflow: hidden;
            padding-top: 6.416667rem;

            background-image: url(../../assets/ColorChangingImg/live.png);

            background-repeat: no-repeat;

            background-size: 100% 700px;
        }
        
        

具体问题具体分析(我的背景图是个渐变到半透明的图片)

或许我的文章不仅仅是在解决问题,也是个向自己提出问题的过程.

最后,我想说:为什么要这么设置呢?这是个问题!