背景图

背景图片的自适应问题

初学者十分喜欢使用一张华丽图片作为背景，但考虑如下情况：

由于前景(文档)与背景（窗口）的尺寸必须一致才能达到最佳效果。因此，当文档内容的容量改变而导致渲染后的文档高宽尺寸发生改变时，就需要重新制作一张新的背景图以适应新的文档尺寸。
用户可能会对窗口尺寸进行缩放或调节，前景内容文本通常能够很好的缩放，而背景图片则仍然保持大小不变
- 譬如使用小分辨率的移动设备查看时，屏幕的分辨率（800*600）小于背景图片的分辨率（980*720），则背景图的部分将不可见
- 或者反过来，则背景图片无法覆盖前景内容，部分文本的背景出现空白

示例 ,将浏览器窗口缩小即可见到背景图的错位

问题的根源：嵌入式的图片是点阵图不是文本（也不是矢量图如svg），不支持无级缩放

方案1：CSS2的伪背景图

<div id="bg-image"> <img src="img/bg.png"> </div> 
#bg-image{   
    position:absolute;top:0; left:0;   
    height:100%; width:100%;
    z-index:-9;     
}   
#bg-image img{width:100%;}

浏览器对于前景图，支持类似于文本的缩放，即图形的物理尺寸和显示尺寸可以不一致
上例中<img>元素的显示尺寸继承于父元素的尺寸
父元素是一个绝对定位的元素，其原点参照<body>，尺寸100%即等于占满全屏
最终，该前景图的显示尺寸被动态放大至全屏,但被定位于Z轴最底层,类似背景效果

注意，如果图片的物理尺寸和显示尺寸相差过大，即放大倍数过大时，则会有严重失真现象

如果源图片是svg格式，则不存在此类问题，为什么？

方案2：CSS3的background-size

<div id="bg-image">  此处为站点内容  </div> 
#bg-image{   
    background-image:url("img/bg.jpg"); 
    background-position: center 0;   
    background-repeat: no-repeat;   
    background-attachment:fixed;   
    background-size: cover;   
    -webkit-background-size: cover;/* 兼容Webkit内核浏览器如Chrome和Safari */  
    -o-background-size: cover;/* 兼容Opera */   
    zoom: 1;   
}

CSS 3 提供了一个 background-size 属性，即允许指定背景图片的虚拟显示尺寸，并提供了container和cover等预置值，支持背景图片随前景元素进行不同类型的缩放

详细参考：

http://www.runoob.com/css3/css3-backgrounds.html
http://www.uisdc.com/css-background-property-guideline
background-size 详解 http://www.cnblogs.com/tugenhua0707/p/5260411.html

方案3：同时兼容CSS2/CSS3

<div id="bg-image">    <img src="img/bg.png">  </div> 
#bg-image{   
    position:absolute; top:0; left:0;   
    height:100%; width:100%; z-index:-9;
    background-image:url("img/bg.jpg"); 
    background-position: center 0;   
    background-repeat: no-repeat;   
    background-attachment:fixed;   
    background-size: cover;   
    -webkit-background-size: cover;/* 兼容Webkit内核浏览器如Chrome和Safari */  
    -o-background-size: cover;/* 兼容Opera */   
    zoom: 1;   
}
#bg-image img{width:100%;}

上例可以在不兼容CSS3的浏览器上使用旧方案,否则使用新的CSS3解决方式,这是一种处理兼容性的小技巧

方案4：模式图 pattern

Export

HTML

Result

对于不复杂的背景(避如渐变),制作一张完整的大图较为麻烦,不如:

制作一个很长很细的静态模式图片,通过横向或纵向的重复(repeat)后，从而动态生成一个有规则的背景大图，完全自适应示例更多模式图

额外的好处: 节省网络带宽;缺点则是：生成的背景较为单调，不适用要求较高的场合。

参考资源

模式图片库 https://www.toptal.com/designers/subtlepatterns/
模式图片库 https://patterninja.com/

方案5： css3 渐变

Export

HTML

Result

CSS3中，提供动态生成各种模式或纹理的功能,从而摆脱静态栅格图片的局限

重点: 理解栅格图形与矢量图形之间的区别与优劣