背景 background

Z轴空间

在前面相对定位,绝对定位的使用中,曾经出现过两个元素彼此重叠的情况,这表明Web不仅支持平面空间,也支持Z轴空间

前景与背景

从视觉角度，前景与背景是视觉上的距离划分；而从语义角度，前景与背景是中心内容与次要修饰的区别：

• 前景是内容,源于文档本身;背景则是对内容的修饰,源于css等外部规则，是陪衬
• 前景意味着语义，搜索引擎等客户端会给予较高的权重；而背景与语义无关，将被语义处理引擎忽视
• 前景内容是唯一的，但同一内容可能被不同的背景所装饰

站点Logo:前景图还是背景图？

• 作为前景图，即 <img src="logo.png"> 标记
  • 优势： 图片自身具有尺寸，方便定位; 可被搜索引擎所收录和解析
  • 劣势：作为内容的图片，控制不够灵活；
• 作为背景图，即 background-image:url(logo.png) 样式
  • 优势：易于控制，譬如基于不同的屏幕尺寸为前景选择不同的背景图片实现响应式布局
  • 劣势：由于背景图片不在html文档流中，不被浏览器视作为内容，因此其渲染后的高宽度值取决于所装饰的文档元素的高宽度

就Logo而言，是具有语义的。尤其是当前的主流搜索引擎已经能做到基于图片的搜索,随着未来语义图形(如SVG)的推广，搜索诸如图形类商标侵权之类，则更为方便