解决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加上一个深色背景,防止出现色差!

发布了48 篇原创文章 · 获赞 17 · 访问量 10万+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章