全屏背景--CSS

来源：互联网发布：ios 同步网络请求编辑：程序博客网时间：2024/05/21 20:30

全屏背景

不仅仅是简单的 background-size: cover 那么简单了，还需要进行小小的处理。先说说我希望实现的效果吧。我希望的效果是整个背景能够填充整个页面，并且在页面元素上下滚动的情况下，背景固定而不随着元素滚动。

放到往常我可能会这么写：

body,html{  height: 100%;}body{  background: url(bg.png) center 0 no-repeat;  background-size: cover;}

但是这样的话在移动端会出现比较严重的后果，那就是一旦页面元素的高度大于整个页面后，滚动页面元素的时候，背景也会随之而动。而且背景会被撑开。这不是我所希望的。

这里用到一个小技巧，用上 :before 的方法。

body:before {  content: "";  position: fixed;  z-index: -1;  top: 0;  right: 0;  bottom: 0;  left: 0;  background: url(bg.png) center 0 no-repeat;  background-size: cover;}

这个用上before的伪元素的方法是一个很有奇效的小技巧。大家不妨可以试试。这样的话在移动端也能完美实现背景固定而且显示全屏。

0 0