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 centerbottom;background-size: 1920px auto;z-index: 100;
}

主要是自用，有其他场景需要也欢迎共同探讨

CSS:头部导航设置复杂背景图片自适应显示（与menu菜单贴合-自用）相关推荐

设置网页背景图片不显示
login.jsp:1 GET http://localhost:8080/images/%E5%BD%AD%E7%AB%B9%E6%A5%A0bg1.jpg 404 首先确定了,路径不会有什么问题. ...
css怎么设置背景图片自适应大小
在css中,可以利用"background-size"属性设置背景图片自适应大小,该属性用于设置背景图片的大小,只需要给背景图片元素添加"background-size: ...
下载页面的css样式文件引用的背景图片
在加载网页的时候,一般会缓存该网页使用的图片资源. 我们在页面的Sources目录下是能够找网所使用的样式和图片等资源. 那么如何下载某网站中我们需要的图片? 使用360浏览器,使用F12功能,选中网 ...
background图片叠加_css怎么让两个背景图片重合显示？
css怎么让两个背景图片重合显示?下面本篇文章给大家介绍一下使用css让让两个背景图片重合显示的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 在css中,可以使用backgr ...
用css使用html设置背景图片自适应,CSS怎么设置背景图片自适应全屏？附源码！...
不少同学在设置网站背景图片时会遇到这么一个问题:背景图片总是不能铺满整个屏幕,不是图片太小就是图片被过度放大,显得不太美观.那么 CSS 怎么设置背景图片自适应全屏呢?这篇文章告诉你. 实现效果: 源 ...
移动端也能兼容的web页面制作2：导航栏、背景图片设置
[ 导读 ] MDBootstrap 是基于 Vue.js 开发的一套前端框架,拥有美观大气的界面效果,友好的交互体验,更棒的是对于移动端也有很好的兼容性.先给大家看下演示 demo 的运行,后面将围 ...
IOS设置导航栏的背景图片和文字
IOS设置导航栏的背景图片和文字 - (void)viewDidLoad {[super viewDidLoad];[self.navigationBar setBackgroundImage:[UI ...
html背景图片只显示一张图片,img只显示图片一部分或 css设置背景图片只显示图片指定区域(示例代码)...
17:14 2016/3/22 img只显示图片一部分或 css设置背景图片只显示图片指定区域 background-position: 100% 56%; 设置背景图片显示图片的哪个坐标区域,图片 ...
html如何把图片在背景图一半,img只显示图片一部分或 css设置背景图片只显示图片指定区域...
17:14 2016/3/22 img只显示图片一部分或 css设置背景图片只显示图片指定区域 background-position: 100% 56%; 设置背景图片显示图片的哪个坐标区域,图片 ...

CSS:头部导航设置复杂背景图片自适应显示（与menu菜单贴合-自用）

CSS:头部导航设置复杂背景图片自适应显示（与menu菜单贴合-自用）相关推荐

最新文章

热门文章