渐变背景上的内容垂直居中
浏览:2180次 出处信息
不同分辩率下的页面内容垂直居中,这问题在某些情况下会比较麻烦,如:内容在不一致的渐变背景之上,让其垂直居中于不固定高的页面,这效果处理不好会出现颜色不一致渐变颜色对应不上的丑陋!
要实现所有分辩率居中是比较难,只能做到符合大部分用户,我一般会做到最大不超过24寸(1920×1200)电脑显示屏幕,在例子中高度等于或小于1200px高度分辩率的情况下,不足一屏的页面内容(固定高度的内容)垂直于不同分辩率居中。
最终实现的效果:http://blog.gulu77.com/demo/200808/mlddle/
制作思路:
实现这效果就相等于,把两个BOX内容重复垂直于容器及容器内。
如等于或小于1920×1200分辨率,把页面高度1200px当作内容高度,应用于class=”warpper”。
class=”warpper”垂直于body内,而class=”content”内容则垂直于class=”warpper”内。
但制作之前最好让你的设计师提供内容在高度为1200px的效果图,注意:内容是在1200px高度的中间。
缺点:
觉得有点不好之处是,我把html及body的滚动条隐藏了,这样对用户体验不太好。而且屏幕高度超过1200px的话你会发现有白颜色的背景(不过以现在的用户来说这机率是非常少的)。
建议继续学习:
- 浏览器对居中的背景图片的兼容性 (阅读:2683)
- 一张背景实现自适应九宫格 (阅读:2470)
- 缩小窗口<body>背景被裁掉 (阅读:2298)
- 两侧背景自动延伸的CSS实现方法 (阅读:2281)
- 理解CSS3线性渐变 (阅读:2201)
- 一个标签应用三个背景图片 (阅读:2166)
- 消失的列表背景 (阅读:2008)
- 改善IE6中a与a:hover的背景支持 (阅读:1906)
- CSS3 文字渐变 (阅读:1853)
- 页面元素的背景及boder被裁掉 (阅读:1821)
QQ技术交流群:445447336,欢迎加入!
扫一扫订阅我的微信号:IT技术博客大学习
扫一扫订阅我的微信号:IT技术博客大学习
<< 前一篇:CSS让你的IE浏览器崩溃
后一篇:IE5至IE7读取不了4095行以后的CSS >>
文章信息
- 作者:Gulu77 来源: Gulu77
- 标签: 渐变 背景
- 发布时间:2009-11-08 21:50:53
建议继续学习
近3天十大热文
- [10] 文言文白话文互转:文言文转白话文(现代文),
- [10] 用邻接表实现无向图
- [10] 海量数据面试题举例
- [9] 一个 VLA (可变长度数组)的实现
- [9] apt 的 update 和 upgrade
- [8] 为什么数组标号是从0开始的?
- [8] arduino-蓝牙各种版本类型及费用对比
- [8] Http/2知识图谱
- [8] HTTPS, SPDY和 HTTP/2性能的
- [7] 前端编码规范(4)—— CSS 和 Sass