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

场景：头部导航是比较复杂的背景图片，有时还需要和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;
}

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