Css 如何使纯颜色/背景图自适应的铺满全屏

摘要

他喵的我觉得一般就是三种需求：

1、纯颜色

• 解释：即只有background-color，没有图
• 需求：应至少充满一个视窗，如果内容超出一个视窗，自适应填充。比如知乎首页。

2、背景图

• 需求很动态，background-size、background-attachment、background-repeat三者搭配使用

3、纹理图

• 解释：指只有一个纹理片段
• 需求：应重复该纹理至充满一个视窗，如果内容超出一个视窗，自适应填充。

纯颜色

body, html{
    height: 100%;
    margin: 0px;
    padding: 0px;
}
.bg{
     width: 100%;
     min-height: 100%;
     background-color: #070d82;
}

背景图

• background-size解决老大问题（图片的长宽要吻合老大的需求，老大的规矩就是规矩！）

         cover：视窗是老大，contain：背景图是老大，百分比：父元素是老大，auto：没有老大，共赢关系，双aotu时图片一定会保持原大小，这个性质好棒啊

• background-attachment决定图片如何随滚轴变化
• background-repeat决定图片大小不够时是否复制

~~贴一份常用配置好了

（为什么我不设置width捏，因为width和height有区别噢！百度一下吧）

body, html{
    height: 100%;
    margin: 0px;
    padding: 0px;
}
.bg{
     background-image: url("../pic/lanBlack.jpg"); 
     min-height: 100%;

     background-size : cover; 
     background-attachment: fixed;
     background-repeat:no-repeat; 

}

浅记录一下。。如果这一页下面还有东西，用一下100vh..

纹理图

先贴一个我的宝藏纹理图网站：Transparent Textures

body, html{
    height: 100%;
    margin: 0px;
    padding: 0px;
}
.bg{
     min-height: 100%;
     background-color: #070d82;
     background-image: url("../pic/bright-squares.png"); 

     //下面三个都取得默认属性值，都可以省略不写
     background-size : auto auto; //双auto可以保证纹理图不会被拉伸和缩放
     background-attachment: scroll;
     background-repeat: repeat;

}