您的位置：首页 > 其它

渐变效果只能渲染一个屏，超过一个屏重新渲染的问题

2020-07-14 05:49 120 查看

原文链接：https://blog.csdn.net/itSeven7/article/details/71107138

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

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

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

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

代码是这样的

[code]<!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加上一个深色背景，防止出现色差!

 

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航