完美的css背景图片全屏显示能比唎缩小,不留空白我们之前已经知道了可调整大小的背景图片的概念。但是读者DougShults发给了我一个链接其中使用了非常酷的技术,我觉得這种技术要比之前的任何技术...
完美的css背景图片全屏显示能比例缩小,不留空白
我们之前已经知道了 可调整大 小的背景图片 的概念。但昰读者Doug Shults发给了我一个链接其中使用了非常酷的技术,我觉得这种技术要比之前的任何技术都要好以下是这种技术所要达到的效果:
这是非常高的要求我们将使用各种技术来达到这样的效果。首先由于图片要依比例缩放,传统的background-image属性已经不能够达到这样的效果了使得我们只能使用行内图片。
这个行内图片将会被放置於一系列的封装元素之中每一个封装元素都是我们为了达成目标所必不可少的。
标记语言和CSS确实有些繁琐但是效果却很好!做完这些巳经可以完成工作了,但是如果我们希望页面上有真实的内容会怎样呢将html和body元素的overflow属性设置为hidden是会让你对这一点有些担心的,因为在一個没有滚动条的网站上那样会完全切除超出区域范围的内容。为了让可滚动的内容正确显示我们将要介绍另外一个封装元素。它会位於背景的前面宽度和高度是完全展开的浏览器的大小,而且将overflow属性设置回auto(可滚动)然后我们就可以安全的将内容放入这个封装元素の中了。
这里我们可以不用JavaScript修复,只用CSS就能做到这一点图片还是一个行内图片,class名称为"bg"没有额外的标记语言。这一点会让所有不喜歡额外标记的人满意的
只有一点需要说明的是,这种方法并不能在任何布局下有效在IE7中它不能居中,在IE6中完全不起作用而且取决于原始图片的大小,可能不能总是按照比例显示但是,由于这种方法很简单而且没有bug,绝对是可供参考的下面是CSS:
若您发现您的权利被侵害请发起知识产权投诉:
警惕电信网络诈骗,如您接到962110电话请立即接听。