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

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

怎么解决呢?

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

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

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

rem也不行哦,必须px!

详细代码如下:

// 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;

}

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

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

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