Html 如何在部分部分添加背景颜色？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/38992878/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to add background-color in a section part?
提问by R3y
Is there any other way to add background color in section tag? Except using body {background-color: blue;}, what is are other ways to add background color into section?
有没有其他方法可以在部分标签中添加背景颜色？除了使用body {background-color: blue;}，还有什么其他方法可以将背景颜色添加到部分中？
I am trying to add the section background color like this:
我正在尝试像这样添加部分背景颜色：
<!DOCTYPE html>
<html>
<head>
<title>Testing</title>
<style>
#ABC {
background-color: blue;
}
</style>
</head>
<body>
<section id="ABC">
</section>
</body>
</html>
There is no color showing on my browser.
我的浏览器上没有显示颜色。
回答by kukkuz
Its because #ABCdoes not have any content or does not have a height!
因为#ABC没有内容或者没有高度！
See below what happened when I have set a height to it.
看看下面当我设置高度时发生了什么。
<!DOCTYPE html>
<html>
<head>
<title>Testing</title>
<style>
#ABC {
background-color: blue;
height: 100%;
position: absolute;
top: 0;
left: 0;
width: 100%;
}
body{
background: grey;
margin: 0;
}
</style>
</head>
<body>
<section id="ABC">
</section>
</body>
</html>回答by Pugazh
<section>element is an grouping container. In your example there is no content and hence it's not visible (I have added red color border to highlight the<section>).
<section>element 是一个分组容器。在您的示例中，没有内容，因此它不可见（我添加了红色边框以突出显示<section>）。
Highlighting the <section>:
突出显示<section>：
<!DOCTYPE html>
<html>
<head>
<title>Testing</title>
<style>
#ABC {
background-color: blue;
border: 1px solid red;
}
</style>
</head>
<body>
<section id="ABC">
</section>
</body>
</html>Try adding heightor content to your <section>for the background-color to be visible.
尝试添加height或内容到您<section>的背景颜色可见。
<!DOCTYPE html>
<html>
<head>
<title>Testing</title>
<style>
#ABC {
background-color: blue;
}
</style>
</head>
<body>
<section id="ABC">
Some text here
</section>
</body>
</html>回答by Rumen Aleksiev
Or maybe they should try a little more color using gradient.
或者也许他们应该使用渐变尝试更多颜色。
<!DOCTYPE html>
<html>
<head>
<title>Testing</title>
<style>
#ABC {
background-image: linear-gradient(45deg,rgb(218,34,255) 30%,#9733ee 90%);
padding: 1em;
border-radius: 3px;
margin: 1em 0;
color: #fff;
}
</style>
</head>
<body>
<section id="ABC">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</section>
</body>
</html>