解决css渐变色只能渲染一屏大小方法

background: linear-gradient( #404a59,#0f1319);

css背景色可以设置渐变样式,但是这个渐变色只能渲染一屏的大小,超出一屏后会再次渲染 比如下图

渲染一屏

上面这个图是打开页面之后刚好是渲染了一屏的渐变色,但是,当把页面往下拉之后

页面因为超出一屏之后再次渲染了颜色 !
解决方法 在body内包一个div,这个div包含所有内容结构,并添加渐变属性,我给body也加了一个深色背景,因为开发中总会有一些意外导致多屏的渐变渲染(最好不要出现这种情况-_-!)

代码是这样的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        html{
            width: 100%;
            height: 100%;
        }
        body{
            width: 100%;
            height: 100%;
            background-color: #0f1319;
        }
        div{
            width: 100%;
            height: 1300px;
            background: linear-gradient( #404a59,#0f1319);
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

总结:
1.渐变色属性不要加给body
2.body内最好包一个父级的div,给这个div加上渐变属性即可,
3.有时候会出现结构不是很清晰的情况,比如浮动,position等影响结构的属性导致页面出现两屏或多屏的渐变色渲染,最好给body加上一个深色背景,防止出现色差!

  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
要实现CSS边框从颜色渐变到透明的效果,可以使用CSS3的渐变功能和border-image属性。一种方法是使用border-image属性,其中可以使用linear-gradient函数来定义渐变。例如,可以将border-image设置为linear-gradient(to right, red, transparent),这将创建一个从红色到透明的水平渐变边框。另一种方法是使用伪元素(before或after),设置其背景颜色为渐变背景,并通过定位将其放置在目标元素的下层。然后,通过将目标元素的边框设置为透明,并使用background-clip属性来指定颜色渲染区域不包括边框,可以实现渐变色边框。具体的实现代码见引用和引用中所示的示例。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [css边框颜色渐变_如何创建CSS渐变边框颜色](https://blog.csdn.net/cune1359/article/details/106837958)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"] - *2* *3* [CSS渐变色边框](https://blog.csdn.net/weixin_45092437/article/details/128210309)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值