前两天写了个盒模型,遇到了父盒子的背景图片因子盒子的撑开而拉伸,或是因子盒子的缩短而收缩的情况,不开心!
怎么解决呢?
父盒子未设定固定高度,完全靠动态获取的子盒子的高度变化来决定它的最终高度.
在这种情况下,背景图的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;
}
具体问题具体分析(我的背景图是个渐变到半透明的图片)
或许我的文章不仅仅是在解决问题,也是个向自己提出问题的过程.
最后,我想说:为什么要这么设置呢?这是个问题!