Question

我需要一个脚本（javascript）来定义主体背景onload，因为首先我有一个脚本来查看页面的宽度和高度。然后，它给了我两个变量（＆＃34; W＆＃34;和＆＃34; H＆＃34;）。我希望背景的宽度= W，高度= H. 所以，最好的解决方案是运行一些脚本，在获取页面的宽度和高度后，将背景放在正文上。

<script>
function fundo() {
var w = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;

var h = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;

}

</script>
</head>
<body onload="fundo()" style="background: 'https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRiu8PAY4rJ4WNg2MqwpMfBQ5w3jAXxu5JMYhgImhog9quU-ikZWq8AgQ'; width: "+ w +" height: "+ h +";" >
</body>

Answer 1

如果你有一些特殊的理由不在CSS中这样做，你应该这样做：

var url = "https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRiu8PAY4rJ4WNg2MqwpMfBQ5w3jAXxu5JMYhgImhog9quU-ikZWq8AgQ";
function fundo() {
    var w = window.innerWidth
            || document.documentElement.clientWidth
            || document.body.clientWidth;

    var h = window.innerHeight
            || document.documentElement.clientHeight
            || document.body.clientHeight;

    document.body.style.background = "url('" + url + "')";
    document.body.style.backgroundSize = w + "px " + h + "px";
}

<body onload = "fundo()"></body>

Answer 2

无论如何，身体都是高度和宽度。您应该可以使用纯CSS完成所有这些操作。您可以使用背景大小来确保它填充可用区域：

body {
    width: 100%; /* set just in case */
    height: 100%; /* set just in case */
    background-image: url(pathtoimage);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

这将拉伸图像以填充它：

body {
    width: 100%; /* set just in case */
    height: 100%; /* set just in case */
    background-image: url(pathtoimage);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100% 100%;
}

用于在加载时定义背景的脚本，宽度/高度可变

2 个答案: