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

发布于 2024-11-29 13:52:45 字数 361 浏览 1 评论 0原文

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

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

正如你所看到的,我有一个body 带有标题的偏移量,正文具有图像背景。然而,该图像并未完整显示。

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

Example: http://jsbin.com/opokev/20

Full image: http://i53.tinypic.com/347a8uu.jpg

As you can see, I have a body with an offset for the header and the body has an image background. However, the image is not being show in full.

Question:
Can I do something with CSS so that the whole image is shown or do I need to use Gimp or photoshop to scale down my image. Currently it is 1400 x 1050 pixels.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(4

她说她爱他 2024-12-06 13:52:45

我认为您正在尝试使图像适合窗口,即使这意味着图像扭曲。

您可以使用已使用的 background-size 属性来实现此目的。但您将其设置为 100% 100%,而不是 cover。实例: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%;
}

I think you are trying to make the image fit the window even if that means the image is distorted.

You can achieve this with background-size property you have already used. But instead of cover you set it to 100% 100%. Live example: 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%;
}
猫七 2024-12-06 13:52:45

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

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

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

CSS2 does now allow you to scale background images. You can use a media query through and present a different image, based on the user's resolution.

BTW: Quotes are not required for URL parameters:

    background-image: url(http://s1.postimage.org/gkkq9uc17/Sketch2.jpg);
满地尘埃落定 2024-12-06 13:52:45

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

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

In your example, the image is not being shown at all. I suspect this is because you are using postimage.org to host the image, and they are blocking the image request from an external domain (your example). If I substitute the URL for an image hosted on my own server, the image background is displayed using the attributes you have set. I would suggest using a different image host.

The CSS3 background-size: cover; attribute that you are using will scale the image proportionally to fill the browser, based on the horizontal width. There should be no need to scale the image beforehand, although this may not always give you the prettiest result.

≈。彩虹 2024-12-06 13:52:45

是的,您可以使用 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>

Check jsbin: http://jsbin.com/izenah/edit#javascript,html

Yes you can do some trick using HTML and CSS, but your image must to be in tag:

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>

Check jsbin: http://jsbin.com/izenah/edit#javascript,html

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文