背景图片的CSS问题

我正在尝试将背景图片添加到我的网站标题中。部分图片应该由主要内容覆盖。背景图片的CSS问题

它被正确定位，但是即使我已经添加了z-index，主要内容并不包括背景图片。

为什么会是这样？

谢谢！

编辑：

如果你看看右边你会看到褐壳蛋是未涉及的主要内容。你仍然可以看到它的一部分。

下面是一些代码：

.header-navigation.back { 
    z-index:-1; 
    position:absolute; 
    margin-left:0; 
    margin-top:-6px; 
    border:none; 
display:block; height:137px; width:1171px; padding:0px; outline:none; text-indent:-9999px; 
background-image:url('http://frenchegg.com/images/backmenu.png'); 
}

，这里是应该覆盖图像的主要内容：

.main-content { 
    z-index:99; 
    position:relative; 
    padding:1em 0 8.5em 0; 
    background:#fff; 
}

来源

2013-04-15 Robert Miller

请分享一些代码或考虑制定小提琴，而不是仅仅指向链接到你的网站，因为如果你的网站是没有了，这个问题将是没有用的给未来的访问者 –

在我的浏览器中看起来不错。 –

您可以根据需要放置任意数量的z-index ...“主要内容”位置不重合。 “主要内容”远远低于。 – tiagojpdias

请在overflow:hidden CSS添加到header-wrap类

.header-wrap { 
    ... 
    overflow: hidden 
    ... 
}

，它应该看起来不错。

日志中问题：

从类.bann

删除z-index: 99999和这个CSS添加到类tooltip-wrap

sorry something went wrong

感谢

来源

2013-04-15 18:06:07

啊，我道歉。我误解了。我会修复它 –

@ LouisG.Talbot请看更新的答案 –

它完美的工作！但是，如果你点击“登录”，你应该看到一个登录表单。虽然表单隐藏。我怎么能解决这个问题？ –

好像你可以减少header-navigation.back规则的高度为100px，而不是混乱z-index。

来源

2013-04-15 18:09:37 Caspar

我宁可盖上它，因为在移动版本上鸡蛋完全显示。 –

我改变了班恩类：

.bann { 
    cursor: pointer; 
    display: block; 
    height: auto; 
    position: relative; 
    width: 101.5%; 
    z-index: 99999; 
    margin-left: 12px; 
}

之后，它似乎确定的最新资讯，并通知我结果的;

我测试了萤火虫上面的代码;）

来源

2013-04-15 18:43:50

背景图片的CSS问题

回答

相关问题