是否有一种方法来获得CSS的背景拉伸或缩放以填充它的容器?
当前回答
使用CSS 3属性background-size:
#my_container {
background-size: 100% auto; /* width and height, can be %, px or whatever. */
}
自2012年以来,这一功能可用于现代浏览器。
其他回答
添加背景附件行:
#background {
background-attachment:fixed;
width: 100%;
height: 100%;
position: absolute;
margin-left: 0px;
margin-top: 0px;
z-index: 0;
}
.stretch {
width:100%;
height:auto;
}
在CSS3中使用background-size属性:
.class {
background-image: url(bg.gif);
background-size: 100%;
}
编辑:Modernizr支持检测背景大小支持。您可以使用编写的JavaScript解决方案来工作,无论您需要它,并在不支持时动态加载它。这将保持代码的可维护性,而无需诉诸于某些浏览器的侵入性CSS hack。
就我个人而言,我使用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感兴趣。
试试这个
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;
}
另一个很好的解决方案是robbin的Backstretch,它可以应用于页面的主体或任何元素- http://srobbin.com/jquery-plugins/backstretch/
使用border-image: yourimage属性来设置你的图像,并将其放大到屏幕或窗口的整个边界。
推荐文章
- 使伸缩项目正确浮动
- 如何取消最大高度?
- 形式内联内的形式水平在twitter bootstrap?
- 自定义元素在HTML5中有效吗?
- 如何选择在最后一个子元素之前的元素?
- 如何触发自动填充在谷歌Chrome?
- CSS变换,锯齿边缘在铬
- 创建圈div比使用图像更容易的方法?
- 强迫孩子服从父母的弯曲边界在CSS
- 为什么Chrome浏览器不正确地确定页面是在不同的语言,并提供翻译?
- 在CSS中@apply是什么?
- 在网页上用鼠标模拟震颤(例如帕金森病)?
- Bootstrap抛出Uncaught错误:Bootstrap的JavaScript需要jQuery
- 如何改变文本区域的边框颜色:焦点
- 我如何设置背景颜色为文本的宽度,而不是整个元素的宽度,使用CSS?