1

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

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

然后<body class="bg">应用它。问题是，如果窗口变得非常窄，我使用的横向背景图像只会覆盖一小部分，因为它会将自身缩放到 100% 的宽度。无论如何我可以让它使用100 % 的宽度或 100% 的高度，以一种永远不会留下任何白色背景的方式？我为此找到了一些指南，但它们都涉及相当“丑陋”的代码。

奖励请求：最好使用支持旧浏览器（如 IE9）的代码

4

3 回答 3

2

仅当您的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>

看到这个 JFiddle

希望这可以帮助！

于 2014-10-30T17:10:04.347 回答
0

使用 css 试试这个：

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

希望这有效。

于 2014-10-30T16:56:21.077 回答
0

您可以使用 CSS“min-height”和“vh”单元来强制 body 元素至少与视口一样高，而不是使用 javascript：

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

body.bg {
    background[...]

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

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

于 2014-10-31T10:23:57.000 回答