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

Question

我正在尝试将 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、字体和网格 CSS 模板 V 2.8.0r4

非常感谢！

Answer 1

主体的大小是动态的，它的大小取决于其内容的大小。在 css 文件中你可以使用：

* {background-color: black}

// 所有元素现在都有黑色背景。

或

html {background-color: black}

// 页面现在有黑色背景，所有元素保持不变。

Answer 2

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

Answer 3

我已经写了这个答案，但似乎已被删除。问题是 YUI 将

background-color:white

添加到了 HTML 元素中。我重写了它，从那里一切都很容易处理。

Answer 4

问题是页面主体实际上不可见。下面的 DIV 宽度为 100%，并且背景颜色本身会覆盖正文 CSS。

要修复无人区，这可能会起作用。它不优雅，但有效。

#doc3 {
    margin: auto 10px;
    width: auto;
    height: 2000px;
    background-color: yellow;
}

Answer 5

我检查了你的源代码，发现要更改为黄色，你需要将黄色背景颜色添加到：#left-padding、#right-padding、html、#hd、#main 和 #yui-main。

希望这是你想要的。再见

enter image description here

Answer 6

您必须将其应用到 body 标签。

速记：

body {
    background: black;
}

单一房产：

body {
    background-color: black;
}

这里有一个 html：如何更改 YouTube 上的背景颜色教程。

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

外部 CSS（使用
```
<link>
```
标签添加 CSS）
内部 CSS（在
```
<style>
```
标签之间键入 CSS）
内联 CSS（直接在 HTML 元素内键入
```
style
```
属性。

使用 JavaScript：使用

document.querySelector("#id").style.backgroundColor = 'black'

只需确保在

<script>

标签之间键入此代码

Answer 7

在我看来，您需要将

yellow

设置为

#doc3

，然后去掉

white

上调用的

#yui-main

（它掩盖了

#doc3

的颜色）。这会使页眉和页脚之间呈黄色。

Answer 8

您在CSS中使用选择器，我猜您只选择了主体的一个组件。因此，如果您希望整个背景为一种颜色，则必须选择正确的组件。在HTML中，有head body，head标签定义了标签上显示的内容。 Body 定义 HTML 的整个正文。突出显示的部分是 HTML 的头部和正文。

Answer 9

只需给div一个类和高度100vh

.doc3 {
margin: auto 10px;
width: auto;
height: 100vh;
background-color: yellow;

}

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

问题描述投票：0回答：9

9个回答

最新问题

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

问题描述 投票：0回答：9

9个回答

最新问题

问题描述投票：0回答：9