Question

我正试图让我的条纹彩色背景在其上方有一个狭窄的中心单色背景，其中一些文章和照片将会去。我不能让彩色背景显示出来。我没看到我的代码有什么问题。我已尝试在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>

Answer 1

我会猜测你需要什么，根据你说你想做什么，你只需要一个带有背景图像的页面和一个有颜色的居中区域，对吗？

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标签）

在背景图象顶部的背景颜色

1 个答案: