[分享]css全屏背景教程

CSS全屏背景是一种让网页背景铺满整个浏览器窗口的方法。其实现主要是通过设置body或者某个元素的高度和宽度为100来实现。body { height: 100; width: 100; margin...

CSS全屏背景是一种让网页背景铺满整个浏览器窗口的方法。其实现主要是通过设置body或者某个元素的高度和宽度为100%来实现。

body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
} 

上述代码设置了body元素的高度和宽度都为100%，移除了body的margin和padding。这样就可以使body元素填充整个浏览器窗口。

要为背景添加图片或颜色，可以使用CSS的background属性。

body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    background: url(bg.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size:cover;
} 

上述代码设置了body元素的背景图片为bg.jpg，并且让背景图片居中，并且通过background-size的值为cover来让背景图片完全铺满整个浏览器窗口。如果要设置背景颜色，可以用background-color。

body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    background-color: #000;
} 

上述代码设置了body元素的背景颜色为黑色。可以根据需要调整背景颜色的值。

总之，使用CSS全屏背景非常简单，只需要设置元素的高度和宽度为100%，并且添加背景图片或者颜色即可。更多关于CSS全屏背景的技巧可参考相关教程和资料。