0

正如您在屏幕截图中看到的那样，背景图像在大显示器中显示时会重复：

在此处输入图像描述

有没有人为此提出任何解决方法？

（如果可能，还有示例 CSS 代码）

现场直播：http: //www.carleighmac.org/

4

4 回答 4

2

显而易见的答案是使用：

#featured-area {
    /* other CSS unchanged */
    background-repeat: no-repeat;
}

目前 Chrome 的 Web Inspector 工具显示的背景属性规则定义为：

background: url(/themes/sunrise/img/nav/slider-background-baby.jpg) repeat-x top center;

如果您将 ' 替换repeat-x为上述内容，no-repeat这将是上述内容的简写版本。

于 2013-06-10T05:39:38.800 回答
1

您不希望它重复并希望以全角显示它（如果您的图像小于监视器屏幕），您可以使用这个 css。

更多选项在这里http://css-tricks.com/perfect-full-page-background-image/

#yourElementID {
  float:left;
  width:100%;
  height:300px; 
  background: url(images/bg.jpg) no-repeat top center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
于 2013-06-10T06:01:38.363 回答
0

如果您使用背景速记属性，那么它将是：

background: url("/themes/sunrise/img/nav/slider-background-baby.jpg") no-repeat center top;

详情在这里。

于 2013-06-10T05:47:11.327 回答
0

如果您的图像不适合显示，那么您将不得不重复它或将其居中或适合（缩放和裁剪）它。

  1. 对于居中，仅使用 CSS 就很容易做到。使用其他答案中提到的非重复选项。但在我看来，这可能看起来有点难看。
  2. 重复一遍，你已经有了它。
  3. 现在就适合而言，您可以在这里参考一篇不错的文章：http: //css-tricks.com/perfect-full-page-background-image/
于 2013-06-10T07:05:24.353 回答