有没有办法让CSS中的背景拉伸或缩放以填充其容器？
使用CSS 3属性background-size:
#my_container {
background-size: 100% auto; /* width and height, can be %, px or whatever. */
}
自2012年起,这适用于现代浏览器.
对于现代浏览器,您可以使用background-size以下方法完成此操作
body {
background-image: url(bg.jpg);
background-size: cover;
}
cover 表示垂直或水平拉伸图像,因此它永远不会平铺/重复.
这适用于Safari 3(或更高版本),Chrome,Opera 10 +,Firefox 3.6+和Internet Explorer 9(或更高版本).
要使用较低版本的Internet Explorer,请尝试以下CSS:
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale'); -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";
使用CSS缩放图像是不可能的,但是可以通过以下方式实现类似的效果.
使用此标记:
使用以下CSS:
#background {
width: 100%;
height: 100%;
position: absolute;
left: 0px;
top: 0px;
z-index: 0;
}
.stretch {
width:100%;
height:100%;
}
你应该完成!
为了将图像缩放为"全出血"并保持纵横比,您可以这样做:
.stretch { min-width:100%; min-height:100%; width:auto; height:auto; }
它运作得很好!但是,如果裁剪了一个尺寸,它将仅在图像的一侧裁剪,而不是在两侧均匀裁剪(并居中).我在Firefox,Webkit和Internet Explorer 8中测试过它.
在CSS3中使用background-size属性:
.class {
background-image: url(bg.gif);
background-size: 100%;
}
编辑: Modernizr支持检测背景大小的支持.您可以使用编写的JavaScript变通方法,但是在没有支持的情况下,您需要它并动态加载它.这样可以保持代码的可维护性,而不需要针对某些浏览器使用侵入式CSS攻击.
我个人使用脚本来处理它使用jQuery,它是imgsizer的改编.由于我现在使用的大多数设计都使用宽度%来表示设备之间的流体布局,因此对其中一个循环略有适应(考虑到并非总是100%的尺寸):
for (var i = 0; i < images.length; i++) {
var image = images[i],
width = String(image.currentStyle.width);
if (width.indexOf('%') == -1) {
continue;
}
image.origWidth = image.offsetWidth;
image.origHeight = image.offsetHeight;
imgCache.push(image);
c.ieAlpha(image);
image.style.width = width;
}
编辑: 您可能也对jQuery CSS3 Finaliz [s] e感兴趣.
试试文章背景大小.如果您使用以下所有内容,它将适用于除Internet Explorer之外的大多数浏览器.
.foo {
background-image: url(bg-image.png);
-moz-background-size: 100% 100%;
-o-background-size: 100% 100%;
-webkit-background-size: 100% 100%;
background-size: 100% 100%;
}
不是现在.它将在CSS 3中提供,但它需要一些时间才能在大多数浏览器中实现.
.style1 {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
适用于:
Safari 3+
Chrome无论如何+
IE 9+
Opera 10+(Opera 9.5支持背景大小但不支持关键字)
Firefox 3.6+(Firefox 4支持非供应商前缀版本)
此外,您可以尝试这个解决方案
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";
zoom:1;
感谢Chris Coyier的这篇文章 http://css-tricks.com/perfect-full-page-background-image/
总之一句:不.拉伸图像的唯一方法是使用
这个问题曾经写于2008年.今天,现代浏览器支持background-size解决了这个问题.请注意,IE8不支持它.
定义"伸展和缩放"......
如果你有一个位图格式,那么拉伸它并拉动它通常不是很好(从图形上讲).您可以使用可重复的模式来产生相同效果的错觉.例如,如果你的页面底部有一个较浅的渐变,那么你可以使用一个像素宽的图形和与容器相同的高度(或者最好更大以考虑缩放),然后将其平铺在页.同样,如果梯度跨越页面,它将比容器高一个像素并且比页面重复一样.
通常,当容器增长或收缩时,为了使其伸展以填充容器,您可以使图像大于容器.任何重叠都不会显示在容器的边界之外.
如果你想要一个依赖于像弯曲边缘的盒子那样的效果,那么你可以将盒子的左侧粘到容器的左侧,并且有足够的重叠(在合理范围内),无论容器有多大,它都不会用完背景,然后用弯曲的边缘对图像右侧的图像进行分层,并将其放置在容器的右侧.因此,当容器收缩或增长时,弯曲的盒子效果似乎随之缩小或增长 - 事实上并非如此,但它给人的幻觉就是正在发生的事情.
至于真正使图像缩小并随容器一起增长,你需要使用一些分层技巧使图像看起来像一个背景和一些javascript来调整容器的大小.目前还没有用CSS做到这一点的方法......
如果你正在使用矢量图形,那么你恐怕不在我的专业领域之外.
京公网安备 11010802040832号 | 京ICP备19059560号-6 