背景只覆盖整个屏幕背景属性?
问题描述:
如果我在我的css文件中写这个。背景只覆盖整个屏幕背景属性?
html {
background: black;
}
黑色将覆盖我的整个屏幕。但在那个时候,我的html
元素没有一个真正的height.The height
属性为0。
对于另一个HTML元素一样div
,必须既有真正height
和width
性质使background-color
作品。
为什么body, html
和div
之间的差异?
我认为,
html {
height: 100%;
width: 100%;
background: black;
}
是使整个屏幕的背景颜色的唯一途径。
答
首先,html,body或div元素与它们的表示没有区别。 像html和body一样,div的高度和宽度默认情况下不会设置为任何东西。如果你没有自己设置它,并且如果它里面没有内容,你将无法看到它的背景颜色。
例如:
.empty{
background-color: black;
}
.size-set{
height: 100px;
width: 100px;
background-color: green;
}
.content-div{
background-color: yellow;
}
<div class="empty"></div>
<div class="size-set"></div>
<div class="content-div">content is here</div>
我希望这会清除你的一些疑惑。
Html标签(或身体)默认情况下没有任何真正的高度。只有当它有内容时,Div才会有真正的高度。该解决方案确实强制html/body具有100%的高度/宽度。更好地使用它在身体上,然后在html上,我认为。 – Kinnza
我不太明白是什么问题?你想达到什么目的?请创建您所面临问题的[mcve]。如果您使用HTML元素的背景颜色,则整个页面将具有该颜色:https://jsfiddle.net/wwjtx6yy/ – Esko
背景色可以很好地与不具有真实高度的html标记一起使用。但是如果div没有真正的高度,背景颜色不起作用。 – Loatheb