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

本文分享了在设置页面背景渐变时遇到的重复问题,通过为HTML根节点设置min-height解决,并给出了具体的代码示例。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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

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

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

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

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

html{
            min-height: 100%;
}

最终效果是这样的:(附上这个好看的渐变色的代码)

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

有喜欢的大大给个赞哦!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值