渐变背景上的内容垂直居中
浏览:2205次 出处信息
不同分辩率下的页面内容垂直居中,这问题在某些情况下会比较麻烦,如:内容在不一致的渐变背景之上,让其垂直居中于不固定高的页面,这效果处理不好会出现颜色不一致渐变颜色对应不上的丑陋!
要实现所有分辩率居中是比较难,只能做到符合大部分用户,我一般会做到最大不超过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的话你会发现有白颜色的背景(不过以现在的用户来说这机率是非常少的)。
建议继续学习:
- 浏览器对居中的背景图片的兼容性 (阅读:2703)
- 一张背景实现自适应九宫格 (阅读:2490)
- 缩小窗口<body>背景被裁掉 (阅读:2317)
- 两侧背景自动延伸的CSS实现方法 (阅读:2300)
- 理解CSS3线性渐变 (阅读:2224)
- 一个标签应用三个背景图片 (阅读:2186)
- 消失的列表背景 (阅读:2024)
- 改善IE6中a与a:hover的背景支持 (阅读:1927)
- CSS3 文字渐变 (阅读:1870)
- 页面元素的背景及boder被裁掉 (阅读:1840)
QQ技术交流群:445447336,欢迎加入!
扫一扫订阅我的微信号:IT技术博客大学习
扫一扫订阅我的微信号:IT技术博客大学习
<< 前一篇:CSS让你的IE浏览器崩溃
后一篇:IE5至IE7读取不了4095行以后的CSS >>
文章信息
- 作者:Gulu77 来源: Gulu77
- 标签: 渐变 背景
- 发布时间:2009-11-08 21:50:53
建议继续学习
近3天十大热文
- [629] Go Reflect 性能
- [24] 正态分布的前世今生(一)
- [15] rsync同步的艺术
- [13] 什么是DNS劫持和DNS污染?
- [13] Linux Used内存到底哪里去了?
- [13] Cuckoo Filter:设计与实现
- [12] Mac下.apk的反编译
- [12] 深入浅出选择类排序算法(简单选择排序,堆排序
- [11] 怎样用core文件调试你的linux程序?
- [11] 关于RDS只读实例延迟分析