您好我正在尝试显示名为#container的div的背景图片,但它无法正常工作?
当我尝试设置背景颜色时,它完美运行......我尝试使用
' /pics/coffey.jpg'
图片/ coffey.jpg
" /pics/coffey.jpg"
" ../图片/ coffey.jpg"
但是图片就像这样说谎/css/pics/coffey.jpg
我的样式文件位于css文件夹中,所以它应该与/pics/coffey.jpg一起使用,但它没有人帮忙?
CSS:
#container {
width : 740px;
height:200px;
margin-left : auto;
margin-right : auto;
margin-top : 20px;
line-height: 1.7em;
background-repeat:no-repeat;
background-image: url("/pics/coffey.jpg");
}
#topbar {
height:20px;
width:740px;
float:right;
font-size:10px;
font-family:Verdana;
font-style:italic;
padding:0px;
background:#644C37;
}
HTML
<!doctype html>
<html lang="sv">
<head>
<meta charset="utf-8" />
<title>Lorem Ipsum</title>
<link rel="stylesheet" href="css/basic.css" />
</head>
<body>
<div id="container">
<div id="topbar">
"Quisque sit amet justo"
</div>
<div id="menu">
<a href="#maincontent">Skip navigation</a>
<ul>
<li class="active"><a href="#">hem</a></li>
<li><a href="#">projekt</a></li>
<li><a href="#">information</a></li>
<li><a href="#">kontakt</a></li>
<li><a href="#">hitta till oss</a></li>
</ul>
</div>
<div id="content">
<div id="maincontent">
<h1>Lorem Ipsum</h1>
<img src="pics/info.jpg" alt="Bubblande kaffe" />
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque tincidunt volutpat nunc. Curabitur id dolor sed massa volutpat mollis. Duis lorem diam, vestibulum pharetra, consequat ac, semper ac, nibh. Integer vel pede ac purus aliquet nonummy. In hendrerit. Praesent posuere, tellus eget nonummy pellentesque, tellus eros bibendum erat, non hendrerit erat eros sed lorem. Sed pretium quam sed lacus. Maecenas turpis tellus, feugiat a, ultrices a, porta ac, nisi. Donec convallis neque. Nam lobortis nibh sit amet metus tincidunt faucibus. Sed nec leo. Aliquam mattis.</p>
</div>
<div id="subcontent">
<h1>Quisque</h1>
<p>Quisque sit amet justo. Maecenas eu nibh ut est tincidunt congue. Vivamus quis diam. Curabitur lobortis pede eu turpis. Nulla adipiscing. Phasellus risus arcu, malesuada eu, molestie et, cursus vel, nisl. Aliquam at est. Nullam nec lacus. Nulla vitae justo. Donec volutpat elit ut orci.</p>
<h2>Read more:</h2>
<ul>
<li><a href="#">http://www.saadsa.fds</a></li>
<li><a href="#">http://www.llsd.seafa/seas</a></li>
<li><a href="#">http://consecyt.hg</a></li>
</ul>
</div>
<div id="bottomcontent">© Linnéuniversitetet, Institutionen för datavetenskap</div>
</div>
</div>
</body>
</html>
答案 0 :(得分:1)
/css/pics/coffey.jpg
是正确的路径