【2021/07/06】
更新第二种方式,目前已在项目上应用
采用padding-top百分比的方法,具体操作如下:
1.计算padding-top值(例如图片宽1920,高1080)
padding-top = (高度 / 宽度 )* 100% = (1080 / 1920)* 100% = 56.25%;
2.完整css如下:
padding-top:56.25%;
background: url("~@/assets/login/bg.jpg") no-repeat;
background-size: cover;
background-position: center;
=====================================
场景:头部导航是比较复杂的背景图片,有时还需要和menu菜单位置贴合,同时需要自适应不同分辨率,实现结果如下:
1920
1366
2048
原始背景图片如下:
代码如下:
.hearder-panel {
position: absolute;
top: 0;
right: 0;
left: 0;
height: 70px;
line-height: 50px;
background: url("./../../../../assets/bgtop.png") no-repeat center
bottom;
background-size: 1920px auto;
z-index: 100;
}
主要是自用,有其他场景需要也欢迎共同探讨