拉伸和缩放CSS背景

有没有办法获得CSS的背景来伸展或缩放来填充它的容器?

16 Solutions collect form web for “拉伸和缩放CSS背景”

对于现代浏览器,您可以使用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 3属性background-size

 #my_container { background-size: 100% auto; /* width and height, can be %, px or whatever. */ } 

自2012年起,这款软件适用于现代浏览器。

用CSS来缩放图像是不太可能的,但是可以通过以下方式实现类似的效果。

使用这个标记:

 <div id="background"> <img src="img.jpg" class="stretch" alt="" /> </div> 

用下面的CSS:

 #background { width: 100%; height: 100%; position: absolute; left: 0px; top: 0px; z-index: 0; } .stretch { width:100%; height:100%; } 

你应该完成!

为了将图像缩放为“全面stream血”并保持宽高比,您可以改为:

 .stretch { min-width:100%; min-height:100%; width:auto; height:auto; } 

它工作得非常好! 但是,如果裁剪了一个尺寸,则只会在图像的一侧裁剪,而不是在两侧(和居中)均匀裁剪。 我已经在Firefox, Webkit和Internet Explorer 8中testing过了。

在CSS3中使用background-size属性 :

 .class { background-image: url(bg.gif); background-size: 100%; } 

编辑: Modernizr支持检测背景大小的支持 。 您可以使用JavaScript解决方法书写,但是如果您不需要支持,则可以dynamic加载它。 这将保持代码可维护,而不诉诸某些浏览器的侵入性CSS黑客入侵。

我个人使用脚本来处理它使用jQuery,它是一个imgsizer的适应。 由于我现在使用的大多数devise都是使用宽度%来进行跨设备的stream体布局,所以对其中一个循环稍作调整(考虑到并非总是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]电子 。

尝试文章背景大小 。 如果您使用以下所有内容,则可以在除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+
  • 铬无论+
  • IE 9+
  • 歌剧10+(歌剧9.5支持背景大小,但不是关键字)
  • Firefox 3.6+(Firefox 4支持非供应商前缀版本)

另外,你可以试试这个解决scheme

  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/

定义“拉伸和缩放”…

如果你有一个位图格式,通常不是很好(用graphics来说)来拉伸它并拉动它。 你可以使用可重复的模式来给出同样效果的错觉。 例如,如果您的页面底部有一个渐变渐变,那么您将使用一个宽度为单个像素且高度与您的容器相同的graphics(或者最好是较大的来缩放),然后将其平铺页。 同样,如果渐变横跨页面,它将比您的容器高一个像素,并在页面上重复。

一般来说,当容器长大或缩小时,为了给容器填充容器的幻觉,使图像比容器大。 任何重叠不会显示在容器的边界之外。

如果你想要的效果依赖于像边框弯曲的东西,那么你会把你的盒子的左边粘到容器的左边,并且有足够的重叠(在合理范围内),不pipe容器有多大,它永远不会用尽了背景,然后将曲面边框的右侧图像放在容器的右侧。 因此,随着容器的收缩或增长,弯曲的盒子效应似乎会随之缩小或增大 – 事实上并不是这样,但它给人的幻觉就是发生了什么。

至于真正使图像收缩和与容器一起成长,您将需要使用一些分层技巧,使图像看起来作为背景和一些JavaScript来调整容器的大小。 目前没有这样做的CSS的方式…

如果你使用的是vectorgraphics,你恐怕已经超出了我的专业领域。

总之一句话:不。 拉伸图像的唯一方法是使用<img>标签。 你必须有创意。

这个答案在2008年曾经是真实的。 今天,现代浏览器支持解决这个问题的background-size 。 请注意,IE8不支持它。

这是我所做的。 在弹力class,我只是改变了高度auto 。 这样你的背景图片总是和屏幕的宽度一样大小,而高度总是会有正确的大小。

 #background { width: 100%; height: 100%; position: absolute; margin-left: 0px; margin-top: 0px; z-index: 0; } .stretch { width:100%; height:auto; } 

添加一个background-attachment行:

 #background { background-attachment:fixed; width: 100%; height: 100%; position: absolute; margin-left: 0px; margin-top: 0px; z-index: 0; } .stretch { width:100%; height:auto; } 

我想指出,这相当于做:

 html { width: 100%; height: 100%; } body { width: 100%; height: 100%; /* Add background image or gradient to stretch here. */} 

另一个很好的解决scheme是Srobbin的Backstretch,可以应用于身体或网页上的任何元素 – http://srobbin.com/jquery-plugins/backstretch/

尝试这个

http://jsfiddle.net/5LZ55/4/

 body { background: url(http://p1.pichost.me/i/40/1639647.jpg) no-repeat fixed; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; } 

SolidSmile作弊的另外一个技巧是通过设置宽度来缩放(比例重新resize),并使用auto来设置高度。

例如:

 #background { width: 500px; height: auto; position: absolute; left: 0px; top: 0px; z-index: 0; } 

使用border-image : yourimage属性设置图像并将其缩放到屏幕或窗口的整个边框。

  • 用jQuery突出显示一个单词
  • 直通/删除整个HTML表格行
  • 在另一个框架的上下文中运行JQuery
  • 我应该把标签标签内的input标签吗?
  • 如何在jQuery中find具有已知类的父类?
  • 响应改变div尺寸保持长宽比
  • 在移动网站上禁用缩放
  • Chrome应用程序的webview和触摸滚动传播
  • 如何alignmenthtml表格中的文字?
  • 使用CSS:之前和之后:内嵌CSS的伪元素?
  • 如何在父div中水平居中div