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%;

 }

我想要它做的是显示＆＃39; home_honey_drip.png＆＃39;在菜单文本下，然后溢出＆＃39;它超过了身体内容的顶部。我尝试添加position: absolute;然而图像消失了。

提前谢谢。

Answer 1

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

您可以使用两个div执行此操作，一个包含图像，另一个包含菜单内容。

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

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

CSS background-image persudo响应绝对位置

1 个答案: