我正在尝试在我的条纹彩色背景上放置一个狭窄的中心单色背景，一些文章和照片将放在上面。我无法显示彩色背景。我看不出我的代码有什么问题。我试过在 div 中制作它，我试过在 body css 中制作多重背景等等。我应该把它放在哪里？
我还实现了一个编码库，这让我很头疼。
CSS文件
body {
text-align: center;
background: url("redstripebackground.jpg");
background-repeat:no-repeat;
background-attachment:fixed;
background-size: cover;
background-position: center top;
}
#nav {
font-family: Celtic Garamond the 2nd;
font-weight: bold;
font-size: 14pt;
width:1000px;
margin:0 auto;
}
#nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}
#nav ul li {
float: left;
}
#nav ul li a {
display: block;
padding: 5px 25px 2px 25px;
color: #000000;
background-color: #FF0000;
text-decoration: none;
height: 24px;
text-transform:uppercase;
width:150px;
z-index: 11;
}
#nav ul li a.active {
background-color: #FFBF00;
}
#nav ul li a.active:hover {
background-color: #FFBF00;
}
#nav ul li a:hover {
background-color: #FFBF00;
color: #000000;
}
#icon {
font-family: Varsity Regular;
font-weight: bold;
font-size: 50pt;
width:1000px;
margin:0 auto;
}
#icon ul {
list-style-type: none;
margin: 0;
padding: 0;
}
#icon ul li {
float: left;
}
#icon ul li a {
display: block;
padding: 0px 25px 10px 25px;
margin: 0px 0px 0px 0px;
color: #000000;
background-color: #FF0000;
text-decoration: none;
height: 60px;
text-transform:uppercase;
width:150px;
border-radius: 0px 0px 20px 20px;
z-index: 11;
}
#icon ul li a.active {
background-color: #FFBF00;
}
#icon ul li a.active:hover {
background-color: #FFBF00;
}
#icon ul li a:hover {
background-color: #FFBF00;
color: #000000;
}
导航栏文件
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<link rel="stylesheet" type="text/css" href="headerandBackground.css">
</head>
<body>
<div id="nav">
<ul>
<li><a href="#">Club</a></li>
<li><a href="#">News</a></li>
</ul>
</div>
<div id="icon">
<ul>
<li><a href="#">UCLC</a></li>
</ul>
</div>
<div id="nav">
<ul>
<li><a href="#">Media</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</body>
</html>
主页
<!DOCTYPE html>
<html>
<head>
<link href="/normalize.css" rel="stylesheet">
</script>
<style>
body{
width:1000px;
margin:0 auto;
}
#cp_widget_63af049c-b69e-4e75-8019-da486b92eef5{
width:900px;
position: relative;
margin:0px auto;
z-index: -1;
}
</style>
</head>
<body>
<?php include('Navbar.php'); ?>
<div id="cp_widget_63af049c-b69e-4e75-8019-da486b92eef5">...</div><scripttype="text/javascript">
var cpo = []; cpo["_object"] ="cp_widget_63af049c-b69e-4e75-8019-da486b92eef5"; cpo["_fid"] = "AgNAf3ry4BXk";
var _cpmp = _cpmp || []; _cpmp.push(cpo);
(function() { var cp = document.createElement("script"); cp.type = "text/javascript";
cp.async = true; cp.src = "//www.cincopa.com/media-platform/runtime/libasync.js";
var c = document.getElementsByTagName("script")[0];
c.parentNode.insertBefore(cp, c); })(); </script><noscript>Powered by Cincopa <a href='http://www.cincopa.com/video-hosting'>Video Streaming Hosting</a> solution.<span>New Gallery 2014/7/25</span><span>height</span><span> 500</span><span>width</span><span> 958</span><span>camerasoftware</span><span> Paint.NET v3.5.11</span><span>originaldate</span><span> 1/1/0001 6:00:00 AM</span><span>height</span><span> 620</span><span>width</span><span> 1024</span><span>camerasoftware</span><span> Paint.NET v3.5.11</span><span>originaldate</span><span> 1/1/0001 6:00:00 AM</span><span>height</span><span> 500</span><span>width</span><span> 960</span><span>camerasoftware</span><span> Paint.NET v3.5.11</span><span>originaldate</span><span> 1/1/0001 6:00:00 AM</span><span>height</span><span> 500</span><span>width</span><span> 957</span><span>camerasoftware</span><span> Paint.NET v3.5.11</span><span>originaldate</span><span> 1/1/0001 6:00:00 AM</span></noscript>
</body>
</html>
最佳答案
我来猜猜你需要什么，根据你说的你想做什么，你只需要一个有背景图片和有颜色的居中区域的页面，对吧？
HTML
<!DOCTYPE html>
<html>
<head>
<link href="/style.css" rel="stylesheet">
</head>
<body>
<div id="content">
<p>My content, articles images and stuff</p>
</div>
</body>
</html>
CSS
body{
background: red url("redstripebackground.jpg") center top no-repeat fixed; /* style according to what you had in your stylesheet */
background-size: cover;
}
#content{
background: #fff; /* white background, replace with your color */
margin: 20px auto; /* 20px for top and bottom, auto calculates the space, resulting in a horizontally centered div */
padding: 10px 15px; /* space between your content and the edge of your white colored div */
width: 80%; /* width of the solid color */
}
在这里你可以看到它的工作，当然没有图像。 http://jsfiddle.net/rafky/
编码库将需要一个单独的线程，因为这是一个完全不同的问题，我们需要更多关于应该做什么以及哪里出错的数据。 (顺便说一句，如果您包含导航 php，则不需要添加 head 或 body 标签)
关于jquery - 背景图像上方的背景颜色，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24965223/