很多时候,我们需要将一个背景铺满整个屏幕,这时候就需要使用 CSS 来实现。
body { margin: 0; padding: 0; background: url(background-image.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }
以上代码中,我们将背景图片设置为居中并不重复,然后使用了background-size: cover;
来让图片完整地占满整个屏幕。
如果我们想要背景图片跟随滚动而移动,可以将background-attachment: fixed;
加入到代码中。
body { margin: 0; padding: 0; background: url(background-image.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-attachment: fixed; }
以上就是实现背景铺满整个屏幕的 CSS 代码,可以根据自己的需求进行调整。