Question

我想在我的网站上添加完整尺寸的背景，最好只使用CSS属性background和background-size。目前我正在使用以下

.bg {
  background: url("./gfxGeneral/backgroundImage.jpg");
  background-size: cover;
  background-repeat: no-repeat;
}

然后<body class="bg">应用它。问题是，如果窗口变得非常狭窄，我使用的风景风格背景图像仅覆盖一小部分，因为它将自身缩放到宽度的100％。无论如何我可以使用 100％宽度或100％高度，以永不留下任何白色背景的方式？我找到了一些这方面的指南，但所有这些指南都涉及到了＃丑陋＆＃34;代码。

奖励请求：最好使用支持IE9等旧版浏览器的代码

Answer 1

如果您的body元素与窗口一样大，那么其他答案的建议仅适用。

如果body大小不是完整的窗口大小，您可以尝试使用JavaScript（我使用的是jQuery框架）：

<script>
$(document).ready(function() {
    // Call the function at the beginning, in case the window is already too small, 
    onResize();

    $(window).resize(function() {
        onResize();
    });

    function onResize() {
        // Note: 16 / 9 is the resolution of the background image
        // Change appropriately
        if ($(window).width() / $(window).height() < 16 / 9) {
            $(".bg").css("background-size", "auto " + $(window).height() + "px");
        }
        else {
            $(".bg").css("background-size", "cover");
        }
    }
});
</script>

请参阅this JFiddle

希望这有帮助！

Answer 2

尝试使用css：

.bg {
  background: url("./gfxGeneral/backgroundImage.jpg");
  background-size: 100% 100%;             //x% y%, first is width and second is height
  background-repeat: no-repeat;
}

希望这有效。

Answer 3

您可以使用CSS＆＃34; min-height＆＃34;而不是使用javascript。和＆＃34; vh＆＃34;单位强制主体元素至少与视口一样高：

http://jsfiddle.net/s9ggm2u1/5/

body.bg {
    background[...]

    min-height: 100vh;
    margin:0px;
}

浏览器支持vh单位： http://caniuse.com/#search=vh

CSS background-size属性

3 个答案: