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

CSS: How to bring background image to the front?

提问by orschiro

I was already looking at CSS: How to make background-image above background-color in a listand tried the !importantattribute but without success.

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

I have thisexample page where I would like to bring the yellow book cover which I use as a background image in front of the navigation bar below.

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

The code I am using is the following:

我使用的代码如下：

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

Any idea why it is not coming to the front?

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

I also tried to assign the navbar a negative z-index without success.

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

采纳答案by Manish Mishra

z-indexwon't work in this case; z-index is meant for those elements which are stacked one over another i.e. they have overlapping top and left, which is not in your case. Html is working the way it should i.e. flow layout,

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

this is your markup outhere on your site :

这是您网站上的标记：

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

clearly, your anchor and navigation bar are placed one after another, they are rendered exactly like that.

显然，您的锚点和导航栏是一个接一个放置的，它们的呈现方式完全一样。

So, if you want to overlap your image, you need to make your image position:absolute. I would recommend, create a independent imgtag and make it position absolute and place it exactly where you want, with relative top and left, so that it adjusts itself according to the resolution.

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

see this simple illustration of z-index :jfiddle

请参阅 z-index 的这个简单说明：jfiddle

in this, we have four float:left, position:absolutedivisions, by-default, when no z-index is given to any of them, the one that was present in the last in the flow, was the visible color, but as you give higher z-index to anyone of them(first one in example), it becomes the visible color

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

回答by Kirk

Edited the old post

编辑了旧帖子

Just change these properties then your good to go. since you provided very small piece of code. it was hard to figure and explain. but do these following changes. this will get you what you want. and you have to do some alignments re-touch again

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

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

The Snapshot is here.

快照在这里。

回答by Lorenz Meyer

The problem lies not where you think. In fact a.home-linkis really on the front, but it does not overlap the navbar. And you really dont want it to, because you could no longer use the navbarto navigate when the menu buttons are situated under the link a.home-link

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

In order to achieve what you liked to, you need to separate your a.home-linkin two:

为了实现您喜欢的目标，您需要将您的目标一a.home-link分为二：

1. Have one aelement represent the link with the text
2. Have a second aelement represent the book cover

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

Just general remarks about your css-coding style:

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

• Use !importantonly in exceptional cases. !importantshould not be a way to invalidate basic css inheritance principles. Conceive your document structure with styling in mind, and you'll (almost) never need !importantany more. Don't use !ipmortantoften, because (1) you cannot override it, (2) it leads to unmaintanable css code.
• Use well chosen z-index values: why use 99999if 2is already bigger than 1? And if you want later something before 99999, will you use 999999?

• 使用!important只有在特殊情况下。!important不应该是使基本 css 继承原则无效的方法。构思您的文档结构时要考虑到样式，您（几乎）将不再需要!important。不要!ipmortant经常使用，因为（1）你不能覆盖它，（2）它会导致无法维护的 css 代码。
• 使用精心挑选的 z-index 值：为什么使用99999if2已经大于1？如果你想要以后的东西99999，你会使用999999吗？

回答by Trevan Hetzel

Stacking order of elements in CSS is controlled by the positionproperty and z-indexproperty. From looking at your code, you do not have a positionproperty declared either on the .home-linkdiv or the navbar below it.

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

I would try adding position: relativeto .home-linkfor starters. Then you might have to play around with the positioning and z-indexof the navbar.

我会尝试添加position: relative到.home-link初学者。然后您可能需要调整定位和z-index导航栏。