直接在css文件中对body设置渐变色:
body {
height: 100%;
background: -webkit-linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);
background: -moz-linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);
background: -o-linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);
background: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);
}
然而无效。但是如果设置:background-color: red
则是有效的。在浏览器控制台查看body容器的高度时发现了问题:
- body容器的高度竟然为0
所以把html标签的高度加上:
html {
height: 100%;
}
至此问题解决。这说明body的高度会受到html的限制,做一个小实验:
html高度 | body高度 | 背景渐变色 |
---|---|---|
不设置 | 100% | 渐变色无效 |
不设置 | 200px | 渐变色有效,但是效果的高度限制在200px,并且重复背景铺满整个可视区域 |
100% | 100% | 渐变色有效 |
100% | 200px | 渐变色有效,并且效果直接应用到整个可视区域高度 |
0 | 100% | 渐变色无效 |
0 | 200px | 渐变色无效 |
1px | 100% | 渐变色有效,效果直接应用于整个可视区域 |
1px | 200px | 渐变色有效,效果直接应用于整个可视区域 |
总结:
- 如果要使body的渐变色生效,要么html设置高度并且高度不能为0;要么html不设置高度但是body高度设置为具体值。
- 当html的height属性已经设置,并且不为0时,无论body的高度是多少,body内设置的背景渐变色都应用于整个浏览器可视区域
- 无论html的高度是否设置,background-color都会生效
最佳实践:
- 尽量设置html的高度