新浪博客

背景图拉伸

2011-02-27 15:48阅读:
昨晚回校拉羽毛球拍线,混到11点才回来,没洗澡。
当时群里面有个同志问了这样一个问题:请问html中怎么将背景图片设为拉伸
但是基本的css语句中,只有横向纵向平铺,即是repeat-x and repeat-y, 怎样做到拉伸效果我一时也不清楚,所以说洗澡后研究研究,上网找了会儿资料,发现一些文章用平铺充数,我手贱.....大部分都说用滤镜处理,但是这样搞定了IE,FF怎么办?
首先下面为滤镜的语句:
height:100%; width:100%;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='路径' ,sizingMethod= 'scale' );

网上只是后面的滤镜语句,不过我试了下,发现网页空白一片,就加了个高度宽度给它,结果IE符合要求,背景图拉伸,而且当浏览器尺寸大小变化时,背景图也会自适应。

FF的话我看了这篇文章http://www.qianduan.net/css3-series-tutorial-background-image-background-and-background-image-size.html中这样一句代码:

-webkit-background-size: 150px 250px;

既然webkit能设置背景图大小,那-moz-
应该也能,所以试了下面这句:

-moz-background-size: 100% 100%;

FF背景图拉伸问题解决.....
这句解决Opera:
-o-background-size: 100% 100%;

这是直接了当的解决方法,那还有其它的方法吗?伟大的吖真同学说:有 背景图拉伸.....
页面中的图片是可以给拉伸变形的,那么:
html:
<div>
<img src='路径' alt='' />
</div>


CSS:
div{
width
: 100%;
height
: 100%;
position
: absolute;
left
: 0px;
top
: 0px;
z
-index: 0;
}

div img{
width
:100%;
height
:100%;
}

弄一个背景层绝对定位垫底,上面挂张图片随浏览器拉伸,这是另外一种方法.....

我的更多文章

下载客户端阅读体验更佳

APP专享