Question

所以我想让我网站的背景有两个基调。我的意思是在中心有一个深灰色，一直向下，但在两侧有一个浅灰色。也许80-85％的页面宽度。我会这样做吗？

所以我想要的是中间是一种颜色，两边是另一种颜色。有没有办法设置bgcolor然后将其宽度设置为80％或类似的东西？

Answer 1

使用背景图片会更好，交配;假设您知道目标受众的主要监视器大小，您可以使用所需的参数制作1024x1图像。但是，如果（并且更有可能是这种情况），您试图让它变得动态，为什么不使用div元素，如下所示：

<style type="text/css">
#main
 {
   width: 84%; 
   background-color: #666666;
   border: 1px solid #cccccc;
   border-width: 0 8% 0 8%;
 }
</style>
<div id="main">#content#</div>

我把它拿回来......真的吗？！边界没有百分比宽度？

Answer 2

如果您的中心区域是固定宽度，那么您可以生成一个宽度为一个像素的图像，然后编写以下CSS：

body {
    background-color: #ccc;
    background-image: url('some-image.jpg');
    background-position-x: center;
    background-repeat: repeat-y;
}

如果没有，则必须定义<div>。如果您希望您的内容集中在页面上，您可能需要定义<div>以保留您的内容...

Answer 3

CSS

<style type="text/css">
    body { background-color: #ccc; }
    div.page { margin: 0 auto; width: 85%; background-color: #ddd; }
</style>

HTML

<div class="page">
    <h1>Your page</h1>
    <p>Coming soon...</p>
</div>

Answer 4

没有。您需要创建一个深灰色背景元素，与浅灰色元素分开。

类似的东西：

<body style="background-color:#ccc;">

<div style="margin:0 auto;background-color:#555;width:85%;">

<!-- rest of the page contents -->

</div>

</body>

或者在身体上使用背景图片，但其可伸缩性较差，不能用于百分比宽度。

在HTML中的两个色调背景？

4 个答案:

CSS

HTML