渐变背景上的内容垂直居中
浏览:2206次 出处信息
不同分辩率下的页面内容垂直居中,这问题在某些情况下会比较麻烦,如:内容在不一致的渐变背景之上,让其垂直居中于不固定高的页面,这效果处理不好会出现颜色不一致渐变颜色对应不上的丑陋!
要实现所有分辩率居中是比较难,只能做到符合大部分用户,我一般会做到最大不超过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的话你会发现有白颜色的背景(不过以现在的用户来说这机率是非常少的)。
建议继续学习:
- 浏览器对居中的背景图片的兼容性 (阅读:2704)
- 一张背景实现自适应九宫格 (阅读:2494)
- 缩小窗口<body>背景被裁掉 (阅读:2320)
- 两侧背景自动延伸的CSS实现方法 (阅读:2304)
- 理解CSS3线性渐变 (阅读:2225)
- 一个标签应用三个背景图片 (阅读:2189)
- 消失的列表背景 (阅读:2029)
- 改善IE6中a与a:hover的背景支持 (阅读:1929)
- CSS3 文字渐变 (阅读:1875)
- 页面元素的背景及boder被裁掉 (阅读:1840)
QQ技术交流群:445447336,欢迎加入!
扫一扫订阅我的微信号:IT技术博客大学习
扫一扫订阅我的微信号:IT技术博客大学习
<< 前一篇:CSS让你的IE浏览器崩溃
后一篇:IE5至IE7读取不了4095行以后的CSS >>
文章信息
- 作者:Gulu77 来源: Gulu77
- 标签: 渐变 背景
- 发布时间:2009-11-08 21:50:53
建议继续学习
近3天十大热文
- [367] Go Reflect 性能
- [31] 正态分布的前世今生(一)
- [17] 基于HTTP缓存轻松实现客户端应用的离线支持
- [16] 公钥私钥加密解密数字证书数字签名详解
- [15] osx平台上lol英雄联盟launcher启
- [14] 无锁HashMap的原理与实现
- [14] Joomla反序列化漏洞的查漏补缺
- [13] 在JavaScript中什么时候使用==是正
- [13] SSL多域名绑定证书的解决方案
- [13] Linux内存中的Cache真的能被回收么?