html - 我无法通过 CSS 显示我的背景

标签 html css

我的文件夹中有额外的文件,我没有删除这些文件并导致我发生冲突。任何其他像我一样的新手,请注意,一个干净的文件夹是可行的方法。感谢大家付出的时间、努力和知识。

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;
}

DEMO

关于html - 我无法通过 CSS 显示我的背景,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20855941/

相关文章:

javascript - :active and :hover both active at the same time, 填充堆栈

javascript - 表单文件上传,添加加载微调器,放置错误,完成后不删除

css - 仅水平翻转一张背景图片

java - 如何从 Jar 中获取嵌入式 Jetty 服务 html 文件,而不是 war

html - html正文中的空格

html - CSS移动导航

html - 绝对定位 div 中的神秘偏移

javascript - 列排序不适用于第 n 个子级 "background-color"(两个冲突的背景颜色)

html - global wrapper div min-height 100vh 打破固定在移动设备上的 child

javascript - 使字符串驼峰式命名的函数