CSS：如何將背景圖像放在前面？

我已經在看CSS: How to make background-image above background-color in a list並嘗試!important屬性，但沒有成功。CSS：如何將背景圖像放在前面？

我有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指數而沒有成功。

來源

2013-12-21 orschiro

z-index在這種情況下不起作用; z-index適用於那些堆疊在一起的元素，即它們有頂部和左邊的重疊，這不屬於您的情況。 HTML是工作應即流佈局的方式，

這是您的網站上標記outhere：

<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時，它就變成可見顏色

來源

2013-12-21 08:10:54

謝謝馬尼什。在這種情況下，我發現你的解決方案最好。添加一個單獨的''標籤完美，並且是一個很好的解決方法。 – orschiro

編輯舊後

只要改變這些屬性，然後你的好去。因爲你提供了非常小的一段代碼。這很難解釋和解釋。但請做以下更改。這會讓你得到你想要的。你必須做一些路線重新再次觸摸

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

快照在這裏。在CSS元件

enter image description here

來源

2013-12-21 08:00:17 Kirk

爲什麼這個屬性是一個問題？我需要這個屬性來定位我想要的背景圖像（它位於導航元素「Bewertungen」和「Kontakt」之間的自由空間） – orschiro

已編輯，檢查出 – Kirk

@Kirk此更新如何帶來盈方黃色標誌？ –

堆疊順序由position屬性和z-index屬性控制。從查看代碼，您沒有在.home-link div或其下面的導航欄中聲明position屬性。

我會嘗試添加position: relative到.home-link初學者。那麼你可能不得不玩弄導航欄的定位和z-index。

來源

2013-12-21 08:04:28

問題不在於你的想法。實際上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？

來源

2013-12-21 08:07:43

CSS：如何將背景圖像放在前面？

回答

相關問題