CSS：如何将背景图像放在前面？答案

【问题标题】：CSS: How to bring background image to the front?CSS：如何将背景图像放在前面？
【发布时间】：2014-01-10 02:14:12
【问题描述】：

我已经在查看 CSS: How to make background-image above background-color in a list 并尝试了 !important 属性但没有成功。

我有this 示例页面，我想在下面的导航栏前面带上我用作背景图片的黄色书皮封面。

我使用的代码如下：

.home-link {
  background: url(http://www.mensch-jinn-dajjal.net/wp-content/uploads/2013/12/Buchtitel.gif) no-repeat !important;
  background-size: 180px 200px !important;
  background-position: 400px 80px !important;
  z-index: 99999 !important;
}

知道为什么它没有出现在前面吗？

我还尝试为导航栏分配负 z-index，但没有成功。

【问题讨论】：

标签： css

【解决方案1】：

z-index 在这种情况下不起作用； z-index 适用于那些堆叠在一起的元素，即它们具有重叠的顶部和左侧，这不是您的情况。 Html 正在以应有的方式工作，即流布局，

这是您网站上的标记：

<header id="masthead" class="site-header" role="banner">
     <a class="home-link" href="...</a> <-- Link containing the image-->
     <div id="navbar" class="navbar"> <!-- navigation bar -->
    </div><!-- #navbar -->
</header>

很明显，您的锚点和导航栏是一个接一个地放置的，它们的渲染方式完全一样。

所以，如果你想重叠你的图像，你需要让你的图像position:absolute。我建议，创建一个独立的img 标签并将其定位为绝对位置，并将其准确放置在您想要的位置，相对顶部和左侧，以便它根据分辨率自行调整。

看这个简单的 z-index 插图：jfiddle

在此，我们有四个 float:left, position:absolute 分区，默认情况下，当没有给它们中的任何一个指定 z-index 时，流中最后一个出现的那个是可见颜色，但是当你给他们中的任何一个更高的 z-index（例如第一个），它变成可见的颜色

【讨论】：

谢谢曼尼什。在这种情况下，我发现您的解决方案是最好的。添加单独的<img> 标记效果很好，是解决此问题的好方法。

【解决方案2】：

问题不在于您的想法。其实a.home-link确实是在最前面，只是它并没有和导航栏重叠。而且您真的不希望它，因为当菜单按钮位于链接 a.home-link 下方时，您将无法再使用 navbar 进行导航

为了达到你喜欢的目的，你需要将你的a.home-link分成两部分：

有一个a 元素代表与文本的链接
让第二个 a 元素代表书籍封面

关于您的 css 编码风格的一般评论：

仅在特殊情况下使用!important。 !important 不应该是使基本 css 继承原则无效的方法。考虑到样式来构思您的文档结构，您将（几乎）不再需要!important。不要经常使用!ipmortant，因为（1）你不能覆盖它，（2）它会导致无法维护的css代码。
使用精心选择的 z-index 值：如果 2 已经大于 1 ，为什么还要使用 99999 ？如果您想在99999 之前添加一些内容，您会使用999999 吗？

【讨论】：

【解决方案3】：

编辑旧帖

只需更改这些属性即可。因为您提供了非常小的代码。很难弄清楚和解释。但请执行以下更改。这会让你得到你想要的。你必须重新做一些对齐重新触摸

.site-header {
    background: url(http://www.mensch-jinn-dajjal.net/wp-       content/uploads/2013/12/header-without-book-1600x230.jpg) no-repeat scroll top;
    background-size: 1600px auto;
    z-index: 1; //updated here
 }

 .navbar {
     background-color: #DD2A0F;
     margin-bottom: 10px;
     padding-right: 80px;
     position: absolute;  //updated here
     top: 200px;  //updated here
     z-index: -2; //updated here
  }


 .site-header .home-link {
     color: #141412;
     display: block;
     margin: 0 auto;
     max-width: 1080px;
     min-height: 280px; //updated here
     padding: 0 20px;
     text-decoration: none;
     width: 100%;
  }

快照在这里。

【讨论】：

为什么这个属性有问题？我需要这个属性来定位我想要的背景图像（在导航元素Bewertungen 和Kontakt 之间的可用空间中）
编辑后，检查一下
如果我理解正确，他希望黄色徽标显示完整视图。如果有定位问题。
@Kirk 我不这么认为。他正试图将黄色部分放在菜单栏的前面。
感谢您的解决方案柯克！我试了一下，它似乎工作。但是，我遵循了其他建议并添加了一个单独的 <img> 标签，然后我可以将它放在导航栏前面，具有相对位置和更高的 z-index。

【解决方案4】：

CSS 中元素的堆叠顺序由position 属性和z-index 属性控制。通过查看您的代码，您没有在 .home-link div 或其下方的导航栏上声明 position 属性。

对于初学者，我会尝试将position: relative 添加到.home-link。然后你可能不得不玩弄导航栏的定位和z-index。

【讨论】：