【问题标题】: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 您可以在页眉高度的图像中放置一个额外的空格
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2013-11-07
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2016-10-16
    • 2015-07-02
    相关资源
    最近更新 更多