8

说，就像这里的例子：http ://www.electrictoolbox.com/examples/wide-background-image.html

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

4

4 回答 4

14

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

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

然后是一些CSS：

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

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

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

于 2012-08-22T23:53:17.537 回答
6

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

body {
  background: url('../images/cat.ong');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}
于 2015-09-25T17:10:44.813 回答
0

您将 CSS 设置为：

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

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

小提琴

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

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

小提琴

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

​</p>

于 2012-08-22T23:53:26.673 回答
0

问题是身体的边距他的默认值是边距：8px，我把它设为边距：0 所以图像拉伸并且没有白色的地方

于 2021-09-03T23:39:22.470 回答