Question

我的文件夹中有额外的文件，我没有删除这些文件并导致我发生冲突。像我这样的任何其他新手，请注意，一个干净的文件夹是要走的路。谢谢大家的时间，精力和努力知识。

好像我的文件夹很乱，我可能会有冲突。我不是正。但是会清理和放弃走着瞧吧。我会让你知道它是如何运作的。谢谢你的帮助。

我几年没有做任何网页设计，我被教导在桌子上做我的布局（Yikes）。所以，如果这是一个适当的noobish问题，我会道歉，但我真的无法弄清楚。我无法显示任何背景，我改变了目录链接写入的方式，我将相同的图片添加到文件夹中的每个可能的部分（它仍然在我的计算机上）。然后我取消了它＆amp;尝试只用背景颜色，这也是行不通的。我几天来一直在盯着这一小段代码＆amp;阅读建议，但我已经用尽了一些东西。我想我做错了什么但是我很愚蠢地看到它。

我正在使用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;
}

Answer 1

您需要使用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;
}

<强> DEMO

Answer 2

在css文件

中将您的班级#backing更改为低于1

#backing 
{
  background-image: url('full path of your folder where file exists/fire.jpg'); 
  background-repeat:no-repeat;
  background-position:center center;

  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;

}

Answer 3

#backing将background-image更改为：

#backing {
    background: some-color some-url some-repeat-option some-position some-attachment-option;
}

好了，请看这里http://jsfiddle.net/Z7KMx/你可以在这里查看http://www.w3schools.com/css/css_background.asp background-image as background-repeat etc是背景的子属性。

background-color: some-color;
background-image: some-url;
background-repeat: some-repeat-option;
background-position: some-position;
background-attachment: some-attachment-option;

当然你也可以通过逐步声明所有子属性来做到这一点，但我认为它太过分了，所以速记版本要好得多。

background: some-color some-url some-repeat-option some-position some-attachment-option;

Answer 4

您好，为了实现此目的，您只需删除background-image添加使用background。这是我为您创建的演示 DEMO

有很多方法可以解决这个问题。但我更喜欢这个。

#backing 
{
  background: url('../images/icons.png') !important; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

我无法从CSS显示我的背景

4 个答案: