Question

我想要用于我的身体标签的背景图像覆盖整个背景，而不会放大图像的某个特定部分。换句话说，我希望图像作为背景显示为完整图片，而不是在任何地方切断。这是我当前身体标签的CSS，带有图像：

body {
    background-image: url("weather-background.jpeg");
    background-repeat: no-repeat;
    background-size: cover;
}

Answer 1

要获取图像封面背景，您可以执行以下操作：

body {
    background: url(weather-background.jpeg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

这是一个有效jsbin示例，其中包含以下output。您可以浏览css tricks - perfect full page background image以获取更多示例和方法。

Answer 2

我目前正在另一个网站上工作，客户已要求使用视差。以下是一些我认为可用于解决问题的CSS属性：

No JSON object could be decoded

试一试，看看它是否有效。

Answer 3

所以这对我有用：

body {
    background-image: url("weather-background.jpeg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

然后我给了我的body标签一个“contentContainer”类并添加了这个jQuery方法：

$(".contentContainer").css("min-height", $(window).height());

当显示背景图像作为页面背景时，如何防止背景图像被放大？

3 个答案: