前端随笔（三）——页面背景色（background-color）设置的问题

通常，我们在实际项目中会涉及到为整个页面设置背景色的需求，以渐变背景色为例，笔者在前段时间的实际应用中就遇到了一些小问题（小白瑟瑟飘过~~~）

在我书写完页面中的DOM后，尝试着给页面设置漂亮的渐变背景，但当我将其设置为to bottom 或者to top 垂直走向时，惊人的发现，出现了下图中的情况；

【页面中的背景色呈现出重复的特点】

经过查阅官方文档与上网查资料，最终，我发现了原因————没有对页面根节点进行设置导致页面渲染出现问题；

解决方法：设置html标签的CSS样式如下即可（为根节点设置最小高度，这样子节点的宽度设为100%时就可以铺满页面）：

html{
            min-height: 100%;
}

最终效果是这样的：（附上这个好看的渐变色的代码）

 body{
            height: 100%;
            background: linear-gradient(to bottom, #ec2F4B, #009FFF); /* W3C */
        }

有喜欢的大大给个赞哦！