图像不完全显示在主体上的背景

实施例：http://jsbin.com/opokev/20 图像不完全显示在主体上的背景

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

正如你可以看到，我有一个用于报头偏移的body和主体具有图像背景。但是，图像并未完整显示。

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

来源

2011-08-16 yogashi

您的jsbin链接不工作 –

现在请尝试。请让我知道是否缩小图像，或者我应该在CSS中做些什么。如果我必须缩小图像，那么什么是理想尺寸 – yogashi

下面是当前正在使用的屏幕分辨率列表：http://gs.statcounter.com/#resolution-ww-monthly-201007-201107 –

我认为你试图让图像适合窗口，即使这意味着我法师被扭曲。

您可以使用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%; 
}

来源

2011-08-16 15:25:40 tw16

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

BTW：报价不需要URL参数：

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

来源

2011-08-16 14:19:19

我不明白......我遇到的问题不是解决方案，而是我的形象从底部被削减。 – yogashi

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

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

来源

2011-08-16 14:37:31

我已更改主持人并更新了链接。所以要得到最漂亮的结果，我应该缩小原始图像？什么是好的维度？还是试错？ – yogashi

这取决于您希望用户下载多少 - 您可以将其保留为当前的大小，并且可以缩小任何较小的浏览器窗口的大小，但这将是相当大的文件大小。当你在比图像更宽的窗口上放大时，图像外观会出现问题，但是你不能真正避免这种情况。通过调整您的浏览器来测试它 - 这应该会导致背景缩放。 –

注意：background-size：cover;只能在最近的浏览器中正常工作。此外，它会根据宽度成比例地缩放，因此如果您的浏览器在全屏显示器上全屏显示，则图像底部将在浏览器底部处于屏幕外。有关如何设置这种灵活背景的更多信息，请点击此处：http://kimili.com/journal/the-flexible-scalable-background-image-redux –

是的，你可以使用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

来源

2011-08-16 15:05:01

这就是我想要的！然而，有了这个，我不能有我的标题 – yogashi

@yogashi看到更新 –

@yogashi你可以在头部图像的高度图像中放置一个额外的空白 –

图像不完全显示在主体上的背景

回答

相关问题