CSS background-image persudo responsive with absolute position

Question

好吧，这真的难倒了我，可能是因为我不能 100% 理解它。我有以下代码在 header 上显示响应式 background-image:

 .home .site-header-main:before{

    display: block;
    max-width: 100%;
    max-height: 100%;
    background-color: transparent;
    background-image: url('/images/home-menu/home_honey_drip.png');
    background-repeat: no-repeat;
    background-size: 100%;
    padding-top: 35%;

 }

我想要它做的是在菜单文本下显示 'home_honey_drip.png'，然后在 body 内容的顶部显示 'overflow'。我尝试添加 position: absolute; 但是图像消失了。

提前致谢。

Answer 1

我认为你需要使用相对位置并将菜单的内容移动到顶部。

您可以使用两个 div 来做到这一点，一个是图像，另一个是菜单内容。

#menu{ 
    top:-100px; 
    position: relative;
    color:white;
}

你可以查看我的jsfiddle。只需将您需要的其余 css 添加到图像中即可。