Question

所以我发现tutorial会根据浏览器的宽高比调整网站背景图片的大小。这样可行，但我只希望它能够裁剪并调整图像大小，如果浏览器的分辨率非常高，不适合。

使用

background-size: cover;

这样做的技巧，但我只希望它改变大小，如果它超过原始大小。换句话说：我只希望它能让背景更大，而不是更小。

任何帮助将不胜感激，谢谢！

Answer 1

你想要修复背景大小你可以使用它。

page{
       with:960px;
        margin-left:auto;
        margin-right:auto;
        background:black;

        }

Answer 2

如果你知道背景图片的宽度，你可以使用媒体查询来达到你想要的效果。

例如，假设你的背景图像是900px宽：

body {
    background: url('/img/background.jpg') no-repeat left top;
}

@media screen and (min-width: 900px) {
    body {
        background-size: cover;     
    }
}

这将为900px及以上的屏幕尺寸设置background-size：cover属性，但会保留较小屏幕的原始尺寸。

哪些浏览器支持媒体查询的参考：http://caniuse.com/css-mediaqueries

仅在分辨率超出图像大小时调整背景图像大小

2 个答案: