这里提供一个基于JavaScript的解决方案。
可以通过window.innerWidth和window.innerHeight来获取当前屏幕的宽度和高度,根据这两个值来调整背景的宽高。
function resizeBackground() {
var screenWidth = window.innerWidth;
var screenHeight = window.innerHeight;
var background = document.getElementById("background");
background.style.width = screenWidth + "px";
background.style.height = screenHeight + "px";
}
resizeBackground();
window.addEventListener("resize", resizeBackground);
这个方法会在页面加载时、以及窗口大小变化时触发,自动改变背景的宽高。
背景的样式需要在CSS中设置,比如:
#background {
position: fixed;
top: 0;
left: 0;
background-image: url('background.jpg');
background-size: cover;
}
其中background-size: cover属性可以使背景图片自适应屏幕大小。