Question

说，就像这个例子中一样：http://www.electrictoolbox.com/examples/wide-background-image.html

当我这样做时，无论我做什么，我最终都会在图像周围出现白色边框。我做错了什么？

Answer 1

如果您希望使用background-image: url(...);，我认为您无法做到。但是，如果你想玩分层，你可以这样做：

<img class="bg" src="..." />

然后是一些CSS：

.bg
{
  width: 100%;
  z-index: 0;
}

现在，您可以通过播放z-index等对拉伸图像上方的内容进行分层。一个快速说明，图像不能包含在width: 100%;应用于整个页面的任何其他元素中。

如果你不能依赖background-size，这是一个快速演示：http://jsfiddle.net/bB3Uc/

Answer 2

理想情况下，背景图像总是使用CSS完成。所有其他图像都是用html完成的。这将涵盖您网站的整个背景。

body {
  background: url('../images/cat.ong');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

Answer 3

您将CSS设置为：

#elementID {
    background: black url(http://www.electrictoolbox.com/images/rangitoto-3072x200.jpg) center no-repeat;
    height: 200px;
}

它使图像居中，但不会缩放图像。

FIDDLE

在较新的浏览器中，您可以使用background-size属性并执行：

#elementID {
    height: 200px; 
    width: 100%;
    background: black url(http://www.electrictoolbox.com/images/rangitoto-3072x200.jpg) no-repeat;
    background-size: 100% 100%;
}

FIDDLE

除此之外，常规图像是一种方法，但它不是真正的背景图像。

使用CSS，如何使图像作为背景图像跨越页面的整个宽度？

3 个答案: