解决css渐变色只能渲染一屏大小方法
来源:互联网 发布:淘宝固定背景添加链接 编辑:程序博客网 时间:2024/06/14 10:24
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加上一个深色背景,防止出现色差!
1 0
- 解决css渐变色只能渲染一屏大小方法
- openlayers2渐变色渲染
- css背景渐变兼容性问题解决
- CSS渐变色
- CSS渐变色
- [CSS]透明色,渐变
- css渐变色
- AGG svg_viewer实现了渐变色渲染
- CSS滤镜:颜色渐变[微软的方法]
- CSS滤镜:颜色渐变[微软的方法]
- css背景渐变的技巧与方法
- css背景渐变的技巧与方法
- [原]CSS实现颜色渐变方法备忘
- css中使得border渐变方法
- CSS控制网页背景渐变色
- css控制网页背景渐变色
- 纯CSS实现渐变色
- <web前端>当背景图片为渐变色图片时,为避免浏览器大小问题,可以选择使用<CSS>实现渐变色,教程如下
- Jenkins如何更改端口号
- 使用 Service Location Protocol 自动化客户机的管理
- Google无法访问的解决办法
- Chrome默认打开网页一直是2345.com,通过设置也无效
- Linux学习总结(29)——CentOS 6和CentOS 7区别总结
- 解决css渐变色只能渲染一屏大小方法
- Net导入导出EXCEL单元格强制换行符转换问题
- opengl:绘制球体
- BOWTrainer
- 收缩菜单,frame与bounds的运用
- matlab画图速度变慢
- C++临时对象
- 正确涂CPU硅脂的方法要这样
- 常用的内部排序