Question

所以我尝试使用页面左下角的背景图片，但我想修复它并使用浏览器窗口调整大小。

我完全接近达到这个目标的唯一方法是使用'background-size：100％'然而，这会使图像太高。所以我不确定用什么来实际使它适合。

有什么建议吗？

这是我目前的代码......

body {
background-color:#000000;
background-image:url(Image.png);
background-position: 0% 100%;
background-attachment:fixed;
background-repeat:no-repeat;
    background-size: 100%;

}

Answer 1

好吧，background-size需要的时间超过just one value。你可以尝试这样的事情：

background-size: auto 100%;

但是，为简单起见，请先尝试：

background-size: cover;

这会使背景的宽度自动调整为100%高度的宽高比。这可以保证背景图像永远不会小于或大于高度，但宽度可以根据浏览器的宽高比变化。

<强>附录

另请注意，并非所有浏览器都支持background-size。如果对您的Internet Explorer支持是个问题，那么我强烈建议您使用Javascript。我也高度建议阅读总是可爱的Chris Coyier关于"Perfect Full Page Background Image"的文章。它讨论了所有类型的后备！

使用'background-size：100％'

1 个答案: