背景图拉伸
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%;
}
弄一个背景层绝对定位垫底,上面挂张图片随浏览器拉伸,这是另外一种方法.....