CSS:头部导航设置复杂背景图片自适应显示(与menu菜单贴合 |
您所在的位置:网站首页 › 如何设置网页的背景图 › CSS:头部导航设置复杂背景图片自适应显示(与menu菜单贴合 |
【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; }主要是自用,有其他场景需要也欢迎共同探讨 |
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |
CopyRight 2018-2019 实验室设备网 版权所有 win10的实时保护怎么永久关闭 |