我的文件夹中有额外的文件,我没有删除这些文件并导致我发生冲突。任何其他像我一样的新手,请注意,一个干净的文件夹是可行的方法。感谢大家付出的时间、努力和知识。
It seems my folder is messy and I might have conflicts. I am not positive. But will clean up & see what happens. I will let you know how it works out. Thank you so far for the help.
我已经有几年没有做过任何网页设计了,我被教导在表格中进行布局(哎呀)。因此,如果这是一个适当的菜鸟问题,我深表歉意,但我真的无法弄清楚。我无法显示任何背景,我多次更改目录链接的编写方式,我将相同的图片添加到文件夹中的每个可能的部分(它仍在我的电脑上)。然后我取消了它并尝试只使用背景颜色,这也不起作用。几天来我一直盯着这一小段代码并阅读建议,但我已经没有什么可以尝试的了。我想我做错了什么,但我太愚蠢了。
我正在使用 editplus。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Burn</title>
<link rel="stylesheet" href="shadow.css" type="text/css"/>
</head>
<body>
<div id="backing">
<!------------------------------beginning of main pages header ------------------->
<div id="header"><img src="makedo.jpg" width="980" height="200px" border="0"/>
</div>
<!------------------------------Navigation bar ------------------------->
<div id="nav">
<p class="title"><img src="images/tabard.jpg" width="60px" height="60px"/><a href="#">Burn<span class="subtitle">-Aszune EU</span></a></p>
<ul id="navigation">
<li><a href="#">Home</a></li>
<li><a href="#">Forum</a></li>
<li><a href="#">Events</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Apply</a></li>
</ul>
</div>
<!------------------------------------main --------------------------------->
<div id="main">
<h1>Burn Guild</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</p>
</div>
<!-------------------------------------side bar--------------------------------->
<div id="sidebar">
<!-- Start HTML Code --><iframe WIDTH="300" HEIGHT="400" title="Shoutbox" src="http://shoutbox.widget.me/window.html?uid=npla79" frameborder="0" scrolling="auto" ></iframe><script src="http://shoutbox.widget.me/v1.js" type="text/javascript"></script><!-- End HTML Code -->
</div>
</div>
</body>
</html>
我的 CSS 是
#backing
{
background-image: url(../images/fire.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#nav
{
background-color:#262626;
width:100%;
height:50px;
box-shadow: 0px 1px 50px #5E5E5E;
position:fixed;
top:0px;
}
.title
{
color:#EDEDED;
font-family:verdana;
font-size:25px;
width:350px;
margin-top:6px;
margin-left:150px;
font-weight:bold;
float:left;
}
.subtitle
{
color:#EDEDED;
font-family:verdana;
font-size:15px;
}
#navigation
{
list-style-type:none;
}
li
{
display:inline;
padding:10px;
}
#nav a
{
font-family:verdana;
text-decoration:none;
color:#EDEDED;
}
#nav a:hover
{
color:#BDBDBD;
}
最佳答案
您需要将 background-image:
与另一个用于重复和位置的手动属性一起使用,或者使用 background:
将所有值添加到其中。
在您的情况下,由于您使用的是背景图像及其所有值,因此它不起作用,因此仅使用 background:
#backing
{
background: url(../images/fire.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
关于html - 我无法通过 CSS 显示我的背景,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20855941/