前端让背景图片铺满整个
页面的方法:
- 使用背景图属性
在 CSS 中使用 background-size 属性来控制背景图片的大小,设置为 cover 即可让图片铺满整个页面:
body {
background-image: url('your-image-url');
background-size: cover;
}
- 使用绝对定位
可以将背景图片作为一个绝对定位的元素,设置宽高为 100% 即可:
body {
position: relative;
}
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
}
然后在 HTML 中添加一个空的 div 元素,作为背景图片的容器:
<body>
<div id="background-image"></div>
<!-- 其他内容 -->
</body>
- 使用 viewport 单位
可以使用 viewport 单位来设置背景图片的大小,这样图片会随着页面大小的改变而自适应:
body {
background-image: url('your-image-url');
background-size: 100vw 100vh;
}
注意:在使用 viewport 单位时,需要考虑到页面的滚动条,可以使用 position: fixed 来固定背景图片,避免滚动时出现空白区域。
原文地址: https://www.cveoy.top/t/topic/bjan 著作权归作者所有。请勿转载和采集!