為什么我的背景 CSS 圖像不顯示
[英]Why isn't my background CSS image showing
問題描述
所以我制作了一個背景圖片，它只是兩個彩色條，以匹配我的 header 和導航欄。 我只是想讓它水平重復，但它沒有出現。 這是顯示我的文件和圖像的屏幕截圖：
謝謝你的幫助！
HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Tech MAX'd</title>
<link rel="stylesheet" href="css/main.css" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="js/general.js" type="text/javascript"></script>
</head>
<body>
<div id="big_wrapper">
<header id="top_header">
<h1>Welcome to Tech MAX'd</h1>
</header>
<nav id="top_nav">
<ul>
<li>...
CSS
*{
margin:0px;
padding:0px;
}
h1{
padding: 2px;
color: #ffffff;
font: 24px Palatino;
display: inline-block;
}
h2{
font: bold 14px Palatino;
}
header, section, footer, aside, nav, article, hgroup{
display:block;
}
body{
margin: 0px;
padding: 0px;
text-align: center;
background: #e0e0e0 url(images/tmbackground.gif) repeat-x;
}
#big_wrapper{
min-width:1000px;
max-width: 1000px;
margin: auto;
text-align:left;
}
#top_header{
padding:20px;
background-color: #820000;
}
#top_nav{
padding:7px 7px 7px 20px; /* top,right,bottom,left */
background: -webkit-gradient(linear, left top, left bottom, from(#e9e9e9), to(#b6b6b6))
}
#top_nav li{
display:inline-block;
list-style:none;
padding-right:25px; /*space between links*/
font: bold 14px Tahoma;
}
a.topLinks{
color: #4e4e4e;
font: bold 16px Century;
text-decoration: none
}
a.topLinks:hover{
color: #820000;
font: bold 16px Century;
text-decoration: none
}
#new_div{
display:inline;
}
#main_section{
min-width: 630px;
max-width: 630px;
border: 1px solid #820000;
background-color: white;
float: left;
margin: 20px;
padding: 20px;
}
#side_news_banner{
float: left;
margin-top: 20px;
margin-left: 15px;
}
.side_news{
border: 1px solid red;
width:220px;
margin: 20px 0px;
padding: 30px;
background: #66CCCC;
}
#the_footer{
clear: both;
text-align:center;
padding: 20px;
border-top: 2px solid green;
}
article {
background: #FFFBCC;
border: 1px solid ;
padding: 20px;
margin-bottom: 10px;
}
article footer{
text-align:right;
}
3 個解決方案
解決方案1
5 已采納 2012-04-08 19:06:02
除非目錄 images 是 css 的子目錄，否則您需要使用
url(../images/background.gif)
因為該位置是相對於 css 文件的。
此外，通常在選擇器和“{”之間留一個空格，即body {而不是body{ 。
解決方案2
4 2012-04-08 19:02:54
很可能
您將其保存在http://example.com/images/background.gif中。 您的樣式表說它位於http://example.com/css/images/background.gif中，因此您收到 404 錯誤。
解決方案3
0 2012-04-08 19:04:01
我不太明白為什么你需要 body 的 width 屬性。 但問題可能出在您的 url 中。我想它應該是“/images/background.gif”。 如果您放置“images/background.gif”，它將指定 css/images/background.gif。
為什么我的CSS背景圖片沒有顯示在頁面上
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.