需要幫助使用 CSS 定位背景圖像
[英]Need help positioning background images with CSS
問題描述
這是我第一次嘗試非表格布局，我真的很掙扎。 我確實花了幾個小時進行反復試驗和研究/閱讀帖子和文章。 因此，在有人說“詢問並回答”並建議關閉此問題之前，請聽我說完並提供一些建議。 非常感謝。
我有兩張圖片，一張用於跨越頁面頂部的標題，另一張用於導航菜單，它應該位於左側標題圖像的正下方。 標題將顯示在標題圖像的頂部（沒問題），一個簡單的無序列表鏈接將顯示在導航圖像的頂部。 顯然，導航圖像應該無縫顯示，就像“連接”到頂部圖像一樣。 我將使用 php include 將它們放在網站的所有頁面上，在這兩個圖像和菜單被正確定位后，我將把單個頁面的內容放在標題下方和導航菜單的右側。
在這一點上，我的努力是試圖弄清楚 a) 為什么導航圖像根本不顯示，以及 b) 為什么菜單顯示在頁面中間。
如果我只是為導航圖像使用 img 標簽，它會顯示在頁面上，所以我知道瀏覽器無法“找到”它...
導航圖像不顯示是因為它在一個 div 中嗎？ 我在這里缺少什么？
我還需要它盡可能跨瀏覽器兼容（至少 IE7+、FF3.6+、Safari、Chrome）。
編碼：
<!DOCTYPE html>
<html lang="en">
<head>
<title>Some Website</title>
</head>
<body style="margin: 50%; padding; 0; width: 1000px; font-size: .8em; background-image: url(images/header.png); background-repeat: no-repeat; background-attachment: fixed; background-position: center top;">
<div id="navMenu" style="background-image: url(images/navBackground.png); background-repeat: no-repeat; background-attachment: fixed; background-position: 0px 200px;">
<ul>
<li>Home</li>
<li>Business Directory</li>
<li>City Government</li>
<li>Community Calendar</li>
<li>News</li>
<li>The Story of the Thing</li>
<li>The History of Somewhere</li>
<li>The Park</li>
<li>Churches and Schools</li>
<li>Recreation</li>
<li>Fire Department</li>
<li>Map</li>
<li>Contact Us</li>
</ul>
</div>
</body>
作為參考，header.png 為 1000x200px，navBackground.png 為 200x500px
2 個解決方案
解決方案1
2 2012-11-19 17:41:31
背景圖像未顯示的原因是因為您使用的是“背景附件：固定”。 通過刪除它，您的背景位置將相對於它所連接的容器。
另一個問題是導航位置。 樣式“邊距：50%”將采用頁面寬度的百分比並將其應用於容器的所有 4 個側面。 通過以像素為單位設置靜態寬度，或使用速記正確設置邊距，您應該獲得更理想的結果。 這是我將使用“margin: 200px auto”的速記示例。 這將使其排列在更好的位置。 要了解有關速記的更多信息，請查看此頁面： http : //www.dustindiaz.com/css-shorthand/
此外，我建議將您的樣式表外部化以清理您的標記。 基本上，您鏈接到文檔頭部的樣式表，並使用類名和 ID 定位元素。 看看這篇文章： http : //www.tizag.com/cssT/external.php
解決方案2
0 2012-11-19 17:40:16
在您的 CSS 中，您可以從 #navMenu 中刪除此 css
#navMenu { background-attachment: fixed; }
您可能還需要仔細檢查圖像的背景位置。
如果你擺脫它，背景圖像應該會出現。
就第二個問題而言，由於頁面正文的邊距為 50%，因此它以頁面為中心。 這將導致一切都像那樣居中。
需要CSS定位方面的幫助
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.