是否有一种方法来获得CSS的背景拉伸或缩放以填充它的容器?
当前回答
我想指出,这相当于做:
html { width: 100%; height: 100%; }
body { width: 100%; height: 100%; /* Add background image or gradient to stretch here. */}
其他回答
对于现代浏览器,你可以通过使用background-size来实现:
body {
background-image: url(bg.jpg);
background-size: cover;
}
覆盖意味着垂直或水平拉伸图像,这样它就不会平铺/重复。
这适用于Safari 3(或更高版本)、Chrome、Opera 10+、Firefox 3.6+和Internet Explorer 9(或更高版本)。
为了让它在低版本的ie浏览器中工作,可以尝试以下CSS:
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";
目前还没有。它将在CSS 3中可用,但要在大多数浏览器中实现还需要一段时间。
我想指出,这相当于做:
html { width: 100%; height: 100%; }
body { width: 100%; height: 100%; /* Add background image or gradient to stretch here. */}
一句话:不。拉伸图像的唯一方法是使用<img>标记。你必须要有创造力。
在2008年,当答案写出来的时候,这曾经是正确的。如今,现代浏览器支持背景大小,这就解决了这个问题。注意,IE8不支持它。
SolidSmile作弊的另一个技巧是通过设置宽度和自动设置高度来缩放(按比例重新调整大小)。
Ex:
#background {
width: 500px;
height: auto;
position: absolute;
left: 0px;
top: 0px;
z-index: 0;
}
推荐文章
- 使伸缩项目正确浮动
- 如何取消最大高度?
- 形式内联内的形式水平在twitter bootstrap?
- 自定义元素在HTML5中有效吗?
- 如何选择在最后一个子元素之前的元素?
- 如何触发自动填充在谷歌Chrome?
- CSS变换,锯齿边缘在铬
- 创建圈div比使用图像更容易的方法?
- 强迫孩子服从父母的弯曲边界在CSS
- 为什么Chrome浏览器不正确地确定页面是在不同的语言,并提供翻译?
- 在CSS中@apply是什么?
- 在网页上用鼠标模拟震颤(例如帕金森病)?
- Bootstrap抛出Uncaught错误:Bootstrap的JavaScript需要jQuery
- 如何改变文本区域的边框颜色:焦点
- 我如何设置背景颜色为文本的宽度,而不是整个元素的宽度,使用CSS?