Question

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

我有this示例页面，我想将黄色书籍封面用作下面导航栏前面的背景图像。

enter image description here

我使用的代码如下：

.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但没有成功。

Answer 1

编辑旧帖子

只需更改这些属性即可。因为你提供了非常小的代码。很难想象和解释。但要做以下这些改变。这会得到你想要的。并且你必须重新接触一些对齐

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

快照就在这里。

enter image description here

Answer 2

问题不在于你的想法。实际上a.home-link确实在前面，但它与导航栏没有重叠。而你真的不想要它，因为当菜单按钮位于链接navbar

下时，您无法再使用a.home-link进行导航

为了实现您的喜好，您需要将a.home-link分成两部分：

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

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

仅在特殊情况下使用!important。 !important不应该是使基本css继承原则无效的方法。在设计时考虑到样式，您将（几乎）永远不再需要!important。不要经常使用!ipmortant，因为（1）你不能覆盖它，（2）它导致无法使用的css代码。
使用精心挑选的z-index值：如果99999已经大于2，为什么要使用1？如果您稍后想要99999之前的某些内容，您会使用999999吗？

Answer 3

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（例子中的第一个）时，它就变成了可见的颜色

Answer 4

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

我会尝试将position: relative添加到.home-link作为初学者。然后，您可能需要使用导航栏的定位和z-index。

CSS：如何将背景图像带到前面？

4 个答案: