图像未在正文背景上完整显示答案

【问题标题】：Image is not displaying in full on a body background图像未在正文背景上完整显示
【发布时间】：2011-08-16 23:29:54
【问题描述】：

示例：http://jsbin.com/opokev/20

完整图片：http://i53.tinypic.com/347a8uu.jpg

如您所见，我有一个body，标题有一个偏移量，正文有一个图像背景。但是，图像并未完整显示。

问题：我可以用 CSS 做一些事情以便显示整个图像，还是我需要使用 Gimp 或 photoshop 来缩小我的图像。目前它是 1400 x 1050 像素。

【问题讨论】：

现在可以了，请尝试。请让我知道是缩小图像还是应该在 CSS 中做一些事情。如果我必须缩小图像，那么理想尺寸是多少
这里是当前使用的屏幕分辨率列表：gs.statcounter.com/#resolution-ww-monthly-201007-201107
...我应该有所有这些分辨率的图像？并使用媒体查询显示相对图像？？

标签： html css background-image

【解决方案1】：

我认为您正在尝试使图像适合窗口，即使这意味着图像失真。

您可以使用您已经使用过的background-size 属性来实现此目的。但不是cover，而是将其设置为100% 100%。实例：http://jsbin.com/opokev/21/

body {
    background: url(http://i53.tinypic.com/347a8uu.jpg) no-repeat center fixed;
    background-position: 0px 85px;
    -webkit-background-size: 100% 100%;
    -moz-background-size: 100% 100%;
    -o-background-size: 100% 100%;
    background-size: 100% 100%;
}

【讨论】：

【解决方案2】：

CSS2 现在允许您缩放背景图像。您可以使用media query，并根据用户的分辨率呈现不同的图像。

顺便说一句：URL 参数不需要引号：

    background-image: url(http://s1.postimage.org/gkkq9uc17/Sketch2.jpg);

【讨论】：

我不明白...我遇到的问题不在于分辨率，而是我的图像被从底部剪切。

【解决方案3】：

在您的示例中，根本没有显示图像。我怀疑这是因为您正在使用 postimage.org 来托管图像，并且他们正在阻止来自外部域的图像请求（您的示例）。如果我将 URL 替换为托管在我自己的服务器上的图像，则图像背景将使用您设置的属性显示。我会建议使用不同的图像主机。

您使用的 CSS3 background-size: cover; 属性将根据水平宽度按比例缩放图像以填充浏览器。无需事先对图像进行缩放，尽管这可能并不总是为您提供最漂亮的结果。

【讨论】：

我已经更改了主机并更新了链接。所以为了得到最漂亮的结果，我应该缩小原始图像？什么是好的维度？还是反复试验？
这取决于您希望用户下载多少 - 您可以将其保留为当前大小，并且对于任何较小的浏览器窗口都会按比例缩小，但文件大小会相当大。当您在比图像更宽的窗口上放大时，您会遇到图像外观问题，但您无法真正避免这种情况。通过调整浏览器大小来测试它 - 这应该会导致背景缩放。
注：背景尺寸：封面；只能在最近的浏览器中正常工作。另外，它会根据宽度按比例缩放，所以如果您的浏览器在宽屏显示器上是全屏的，则图像的底部将在浏览器底部离屏。有关如何设置这样的灵活背景的更多信息，请访问：kimili.com/journal/the-flexible-scalable-background-image-redux

【解决方案4】：

是的，你可以使用 HTML 和 CSS 做一些技巧，但你的图片必须在标签中：

CSS：

  html, body, #body { height:100% }

  #body { position:relative }

  img {
    position:absolute;
    width:100%;
    height:100%;
    display:block;
    z-index:1;
  }

  div#masthead {
    background-color: #262626;
    height: 85px;
    padding: 0;
    width: 100%;
    margin: 0;
    z-index:2;
    position:relative
   }

HTML：

<body>
  <img src="http://i53.tinypic.com/347a8uu.jpg">
  <div id="masthead"></div>
</body>

查看jsbin：http://jsbin.com/izenah/edit#javascript,html

【讨论】：

这就是我想要的！但是，有了这个我不能有我的标题
@yogashi 您可以在页眉高度的图像中放置一个额外的空格