body {
background: #000 url(myBackground_1280x960.jpg)
center center fixed no-repeat;
}
演示一展示了在一张页面里设置一张1280*960像素大小的固定位置的居中背景图(它并不随着文档的滚动而滚动)。
那么到底多大尺寸的图片才是足够的呢?显示器和操作系统的换代速度是非常快的,其结果就是现在有非常多的屏幕分辨率需要我们去应付。现在最常见的是1024x768px, 1280x800px, 1280x1024px, 和 1440x900px。并且,当高清屏幕(1920x1080px)和支持高达2560x1600px分辨率的专业显示器来临的时候,我们会面临几乎所有可能的分辨率情况。
另外我们还需要考虑到低版本浏览器的情况。尽管现在一系列的浏览器只支持800x600px的分辨率,但他们的使用者还是会常常并不全屏设置他们的浏览器。况且我们目前还没谈及那些更低分辨率的手持终端的屏幕。
相对于使用一张固定图片作为背景,更好的作法是能将图片进行自动缩放以适应任何分辨率的屏幕。不幸的是,CSS 2.1的版本并未对背景图缩放提供任何方法。
针对这个问题曾经有两个解决办法[1、2],但他们都依赖于HTML里的img元素(替代CSS里的背景图)。它们还对层和表格使用绝对定位或用脚本代码来实现图片的缩放功能。另外,不是所有的这样技术都能一直保持图片原有的比例,最终图片会为了单纯的延伸以适应屏幕而变得面目全非。
CSS3 背景技术带来的拯救
W3C CSS3的背景及边框模型(目前的工作草案)明确定义了新的复合开发者需求的background-size属性。我们会关心的属性有(W3C详情):
contain
在保持图片原有长宽比(如果有的话)的情况下,最完整地(to the largest size)缩放图片(不剪裁)直到其宽和高都能填充进(fit inside)容器的背景设定区域。
cover
在保持图片原有长宽比(如果有的话)的情况下,最贴切地(to the smallest size)缩放图片(注:剪裁)直到其宽和高都能完整覆盖(completely cover)容器的背景设定区域。
Contain属性值总是在视觉区域内显示完整的图片,当显示区域的长宽比不同于图片的长宽比,会用不透明的边框来填充余下的部分。见演示二。
Cover属性值总是将图片填满整个浏览器窗口,当显示区域的长宽比不同于图片的长宽比,它会剪裁掉图片多余的四周。你可以使用background-position属性来设置背景图在窗口中的定位方式。见演示三。
你可以通过在样式表中添加下面的声明来设置背景的缩放:
body {
background: #000 url(myBackground_1280x960.jpg)
center center fixed no-repeat;
-moz-background-size: cover;
background-size: cover;
}
Firefox3.6(需要加-moz前缀,而从Firefox4开始将支持常规的无需加前缀的CSS3属性)、Chrome 5、Safari 5以及Opera 10.54等版本已经可以支持background-size属性,IE9也将支持这一属性(在目前的Preview 3版本中已经得到了应用)。老一些的WebKit和Opera版本的浏览器已经支持了这一属性,但它们所履行的标准是基于尚无contain和cover属性值的原草案。
这个方法的缺陷是没有属性可以为一张图片设定最小的宽、高值。当有人将他的浏览器窗口调整到非常小的时候,背景图片也会随之而变得非常小。设计师们可能并不喜欢这种情况,因为那会使得背景图片过小而变得无法辨认。
添加CSS3媒介设备查询的代码组合
CSS3媒介设备查询( W3C CSS3 Media Queries Module,一个候选建议)以明确的宽度或高度为设定规则的条件。这令我们可以实现过小的窗口不必缩放背景图。媒介设备查询技术目前支持的浏览器有Firefox 3.5、Chrome、Safari 3以及Opera 7,未来的IE9也会支持这一技术。
使用下面的代码我们可以在分辨率小于1024×768像素的时候不必缩小背景:
body {
background: #000 url(myBackground_1280x960.jpg)
center center fixed no-repeat;
-moz-background-size: cover;
background-size: cover;
}
@media only all and (max-width: 1024px) and (max-height: 768px) {
body {
-moz-background-size: 1024px 768px;
background-size: 1024px 768px;
}
}
注意1024×768像素的分辨率同背景图片(1280x960px)的长宽比是相同的,如果不同会在调整浏览器窗口大小时随着背景图的缩放产生突然的跳跃。
在最后的演示中,演示四和演示五,因为加入了@media规格,所以我们的背景图在小于1024×768像素的情况不会继续缩放。演示五定义了background-position属性使得背景图不是居中显示而是沿着左下角显示,我们可以控制在视觉范围内图片对齐的方式。
回视老技术
随着所有的浏览器厂商都在抓紧开发支持即将实施的HTML5和CSS3技术的浏览器,当下正是所有WEB开发人员兴奋的时刻。因为同传统的老技术相比,我们会看到新的技术是多么的灵巧和简洁。相比于Firefox、Chrome、Safari和Opera的快速更新周期,我们来看看究竟还有多久人们才能使用上IE9会是件有趣的事情,因为很快我们能大规模的应用这些新技术了。
相关推荐
用户web的动画背景 超大分辨率的动画
或者,可以在原始黑洞的背景下解释这些超大质量黑洞的存在。 在本文中,我们讨论了星系形成的各种模型,这些模型说明了引力波可以用来检验其中某些模型的有效性。 我们还讨论了原始黑洞作为星系形成的播种成分的...
常用于logo 装饰性的小图片或者超大图片 background-image: none(默认) | url(图片地址/路径); (3)背景平铺 background-repate: repate(默认) | no-repate | repate-x(沿x轴/横向平铺) | repate-y(沿...
雪人超大图片,可以做桌面、手机背景、可以用来做日历、印刷品等。
电动汽车供能背景 汽车供能方案 超大功率充电介绍 超大功率充电关键技术
基于互联网 的反转营销,目录:项目背景、项目内容、项目效益、项目特点,淡雅灰低面风背景,超大数字过渡页设计,卡通风格图表,互联网科技通用商务演示ppt模板。
以平煤股份十一矿己16-17-24030切眼为工程背景,采用理论分析与现场监测方法,提出了切眼卸压减跨控顶与应力损失补偿支护技术,确定了适合大采高超大断面切眼掘进的"二次成巷、二次拉底、二次补充支护"施工工艺,并对...
为探究断层对超大采高工作面的影响及应对措施,以神东大柳塔煤矿7 m超大采高52503综采工作面为例开展了探讨。在分析了工程背景和断层特征的基础上,详述了断层对煤岩层的整体、工作面回采、顺槽、联巷及密闭的影响,...
垂直于具有足够大张力的静态直宇宙线(超质量... 在本文中,我们讨论了4d Abelian-Higgs模型中多个超大质量宇宙弦的存在如何引起横向空间的自发压缩,并明确构造了引力背景到处都是规则的解决方案。 我们讨论了该模型在
在本文中,我们构造并检验了新的超大质量IIA超对称解,这些超对称解是通过将非阿贝尔T对偶应用于Klebanov-Strassler背景的重音分支而获得的。 几何图形显示<math altimg =“ si1.gif” xmlns =“ ...
以广州地铁六号线大坦沙站方向与车站对接段隧道加固为工程背景,针对超大断面和复杂的条件,提出采用人工冻结法施工。首先基于热力学原理,推导了岩土冻结过程的水热力耦合控制微分方程组,并采用有限元软件对水平冻结...
超大jQuery插件 可以在官方项目页面上找到文档: : ***变更日志*** 12/2/23-3.2.7 *Fixed issue with previous thumbnail not loading correctly *Autoplay now works when no transition is specified *Updated...
随着城市规模不断扩大、社会形势日益复杂,日常超大规模人员出行和时空分布不均衡等因素影响下,有限的安保资源与社会不断增长的出行需求矛盾不断突出,导致城市公共交通安全正面临巨大挑战。 随着以AI为代表的新...
可以使用滑块移动 来改变滚动条,将屏幕显示到缩略图的位置,方便用户在超大的背景板上操作。或者超大的背景图,背景可以有边界,滑块不会超出区域。
为了研究超大跨径碳纤维(CFRP)主缆悬索桥的动力性能,以某海峡为工程背景,设计了主跨3500m的CFRP主缆悬索桥.基于ANSYS软件平台,分析了该CFRP主缆悬索桥的动力特性,探讨了矢跨比、主缆安全系数、加劲梁约束体系和...
主要为大家详细介绍了Bootstrap超大屏幕的实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
为了设计出适用于超大视场红外鱼眼告警系统的有效算法,对超大视场红外鱼眼告警系 统所拍摄的红外图像进行分析,结果发现:超大视场红外图像中目标只表现为一个点,红外图像 的背景非常复杂;对于天空背景,随着仰角的增大...
针对深部高应力超大断面硐室围岩易失稳的问题,以红庆河煤矿设备换装硐室为工程背景,采用FLAC3D数值模拟软件分析了在低扰动掘进条件下超大断面硐室的围岩应力分布特征及变形规律,结果表明:高应力条件下,超大断面...
背景 基本上只要是做后台开发,都会接触到分页这个需求或者功能吧。基本上大家都是会用MySQL的LIMIT来处理,而且我现在负责的项目也是这样写的。但是一旦数据量起来了,其实LIMIT的效率会极其的低,这一篇文章就来讲...