[英]With CSS, how do I make an image span the full width of the page as a background image?
Say, like in this example here: http://www.electrictoolbox.com/examples/wide-background-image.html 比如说,就像这个例子一样: http : //www.electrictoolbox.com/examples/wide-background-image.html
When I do it, I end up getting white borders around the image no matter what I do. 当我这样做时,无论我做什么,我最终都会在图像周围出现白色边框。 What am I doing wrong?
我究竟做错了什么?
If you're hoping to use background-image: url(...);
如果你希望使用
background-image: url(...);
, I don't think you can. ,我认为你不能。 However, if you want to play with layering, you can do something like this:
但是,如果你想玩分层,你可以这样做:
<img class="bg" src="..." />
And then some CSS: 然后是一些CSS:
.bg
{
width: 100%;
z-index: 0;
}
You can now layer content above the stretched image by playing with z-indexes and such. 现在,您可以通过使用z-index等来对拉伸图像上方的内容进行分层。 One quick note, the image can't be contained in any other elements for the
width: 100%;
一个快速说明,图像不能包含在
width: 100%;
任何其他元素中width: 100%;
to apply to the whole page. 申请整个页面。
Here's a quick demo if you can't rely on background-size
: http://jsfiddle.net/bB3Uc/ 如果您不能依赖
background-size
这是一个快速演示: http : //jsfiddle.net/bB3Uc/
Background images, ideally, are always done with CSS. 理想情况下,背景图像总是使用CSS完成。 All other images are done with html.
所有其他图像都是用html完成的。 This will span the whole background of your site.
这将涵盖您网站的整个背景。
body {
background: url('../images/cat.ong');
background-size: cover;
background-position: center;
background-attachment: fixed;
}
You set the CSS to : 您将CSS设置为:
#elementID {
background: black url(http://www.electrictoolbox.com/images/rangitoto-3072x200.jpg) center no-repeat;
height: 200px;
}
It centers the image, but does not scale it. 它使图像居中,但不会缩放图像。
In newer browsers you can use the background-size
property and do: 在较新的浏览器中,您可以使用
background-size
属性并执行:
#elementID {
height: 200px;
width: 100%;
background: black url(http://www.electrictoolbox.com/images/rangitoto-3072x200.jpg) no-repeat;
background-size: 100% 100%;
}
Other than that, a regular image is one way to do it, but then it's not really a background image. 除此之外,常规图像是一种方法,但它不是真正的背景图像。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.