Question

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

正如您所看到的，我有一个body标题的偏移量，并且正文具有图像背景。但是，图像没有完整显示。

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

Answer 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%;
}

Answer 2

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

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

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

Answer 3

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

您正在使用的CSS3 background-size: cover;属性将根据水平宽度按比例缩放图像以填充浏览器。不需要预先缩放图像，尽管这可能并不总是能给你带来最漂亮的结果。

Answer 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

图像未在身体背景上完整显示

4 个答案: