logo标签列表

如何在CSS中设置整个页面的背景颜色

htmlcssjquery-ui-css-framework
39

我想将yumdom.com的背景颜色设置为黄色。

我尝试了以下方法，但没有成功：

body{ background-color: yellow;} /*only a sliver under the header turns yellow.*/

#doc3{ background-color: yellow;} /*result same as above*/

#bd { background-color: yellow;} /*result same as above*/

#yui-main { background-color: yellow;} /*a rectangle turns yellow ending at where the content ends. I want this rectangle to extend all the way to the footer.*/

还要注意的是，如果在Chrome开发者工具中，我突出显示上面任何一个html元素，只会突出显示页面的一部分。页脚和内容下面的部分仍然没有突出显示。

我想让黄色填满标题和页脚之间的整个空间，不留白。

请注意，我们正在使用YUI Reset、Fonts和Grids CSS模板V 2.8.0r4

非常感谢！

8个回答
27
元素的大小是动态的，它的大小与其内容一样大。 在 css 文件中，您可以使用以下代码： * {background-color: black} // 所有元素现在都有黑色背景。
或者 html {background-color: black} // 页面现在有黑色背景，所有元素保持不变。
21

<html>
  <head>
    <title>
        webpage
      </title>
</head>
  <body style="background-color:blue;text-align:center">
    welcome to my page
    </body>
  </html>

8

我已经写好了答案，但似乎被删除了。问题是YUI将background-color:white添加到HTML元素中。我覆盖了它，然后处理起来就容易多了。

6
问题在于页面的主体实际上并不可见。下面的DIV宽度为100％，并且具有自己的背景颜色，这会覆盖主体CSS。
为了解决这个空白区域的问题，可能可以采用以下方法。虽然不太优雅，但能解决问题。
#doc3 {
    margin: auto 10px;
    width: auto;
    height: 2000px;
    background-color: yellow;
}
谢谢！问题在于，存在这样一个无人区，即内容下方一直到页脚顶部的区域，它不属于任何一个div，并且不能使用任何div进行着色。 - rostam
谢谢！但是修正高度会导致出现滚动条。我们已经付出很大努力确保滚动条永远不会出现。 - rostam
问题最终是由于底部的绝对定位引起的。如果将页脚移到该块之外，您可能可以将#doc3的高度设置为100％。但这可能不起作用。如果您将其放在jsFiddle上，我可以稍微调整一下。您也可以在我给您的样式中设置overflow:hidden。 - Brian Hoover
谢谢。我把页脚从#doc3中移出来了，并将doc3的高度设置为100%。但是，doc3仍然只填充其内容的大小。而且，body的背景颜色并没有填满无人区。我会尝试在JSFiddle中复制这个任务，这本身就是一个挑战。 - rostam
4
我已经检查了你的源代码，并发现要将颜色更改为黄色，你需要将黄色背景颜色添加到：#left-padding、#right-padding、html、#hd、#main和#yui-main。
希望这是你想要的。再见。 enter image description here
4

你需要将它应用到 body 标签上。

简写：

body {
    background: black;
}

单个属性：

body {
    background-color: black;
}

这是一个关于如何改变背景颜色的HTML教程，你可以查看这个YouTube视频。

其他答案没有提到的是有四种实际指定/更改CSS的方法：

  1. 外部CSS（使用<link>标签添加CSS）
  2. 内部CSS（在<style>标签之间输入CSS）
  3. 内联CSS（在HTML元素中直接输入style属性）
  4. 使用JavaScript：使用document.querySelector("#id").style.backgroundColor = 'black'，只需确保在<script>标签之间键入此代码
这个答案已经给出，不针对问题的特定问题。 - jasie
0

看起来你需要在#doc3上设置yellow，然后消除在#yui-main上调用的white（它遮盖了#doc3的颜色）。这样可以在页眉和页脚之间得到黄色。

0

你正在使用CSS选择器，我猜你只选了一个页面组件。所以如果你想要整个背景都是同一种颜色，你必须选择正确的组件。 在HTML中，有head和body两个标签，head标签定义了页面中显示的内容。 Body标签则定义了整个HTML文档的正文内容。其中重点是HTML文档的head和body部分。输入图片描述

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接