CSS如何解决背景图随父盒子高度变化而拉伸或收缩的问题 |
您所在的位置:网站首页 › 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; }具体问题具体分析(我的背景图是个渐变到半透明的图片) 或许我的文章不仅仅是在解决问题,也是个向自己提出问题的过程. 最后,我想说:为什么要这么设置呢?这是个问题! |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |