具有绝对位置的 CSS 背景图像伪响应

Question

好吧，这真难倒我，可能是因为我不能 100% 理解它。我有以下代码在页眉上显示响应式背景图像:

 .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”，然后将其“溢出”到正文内容的顶部。我尝试添加 position: absolute; 但是图像消失了。

提前谢谢你。

Answer 1

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

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

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

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