如何應用標題圖片背景？

我想讓標題有背景圖片。我希望該背景圖像具有100％的寬度，並且圖像的其餘部分用於高度（對於保持高度的縱橫比）以及頂部的標題元素。如何應用標題圖片背景？

我試圖申請..

header { 
Background: url(background.jpg) no-repeat; 
background-size: 100% auto; 
}

但是這使得背景就停在頭元素停止（導航菜單）..我想背景圖片向下走一路，直到圖像本身完成.. 如果這沒有任何意義，我很抱歉。

來源

2013-10-09 Magdi Gamal

如果您想報頭的高度依賴於背景圖像的高度，恐怕你的運氣了。你唯一的選擇是javascript。 –

你想讓背景圖像比標題元素大嗎？ – luiscubal

我認爲你最好的選擇是根據圖像的大小來指定標題本身的高度（以em爲單位）。然後將這些元素放置在該空間內。（當你說'背景尺寸：100％'，這並不意味着圖像的尺寸爲100％，這意味着容器的尺寸的100％。） –

如果我理解正確的話這是你的頭元素的高度小於你的圖片的高度。

header { 
Background: url(background.jpg) no-repeat; 
background-size: 100% auto; 
height: <height of the image in pixels>px 
}

這將使兩個相同的高度，使得圖像不會被切斷

來源

2013-10-09 20:34:30 user1205406

您可以使用CSS的z-index財產。

CSS：

header 
{ 
    position: absolute; 
    top: 0px; 
    right: 0px; 
    height: auto; 
} 
span 
{ 
    z-index: 2; 
} 
img 
{ 
    position: absolute; 
    top: 0px; 
    left: 0px; 
    z-index: -1; 
}

HTML：

<header><span>Your text here</span><img src='Your image.JPG'/></header>

來源

2013-10-09 20:47:17 skrtbhtngr

如何應用標題圖片背景？

回答

相關問題