本文在于详解background属性,再到background-position在 sprites中的实际使用。纠正:是sprites,不是sprite

background:

主要参看这几个链接就好了。

http://www.w3cplus.com/css/a-primer-to-background-positioning-in-css.html (中文版)

http://blogs.adobe.com/dreamweaver/2015/03/a-primer-to-background-positioning-in-css.html (英文版)

https://developer.mozilla.org/en-US/docs/Web/CSS/background  

MDN上background全部属性总结

<strong>background</strong>
<ul>
	<li>clip</li>
	<li>color</li>
	<li>image</li>
	<li>position</li>
	<li>attachment</li>
	<li>origin</li>
	<li>repeat</li>
	<li>size</li>
</ul>

总共有8个。

CSS盒模型

CSS中一个元素拥有三个区域(称为盒子 Box),边界框border box,填充框padding box,内容框content box。
  • 边界框是元素内部结构加上边框区域;
  • 填充框是除去边框的,包括元素内容和周围填充(由padding属性指定)的区域;
  • 内容框是由元素内容创建的区域,不包括填充和边框;
box model

值得注意的属性:

  • background-position
  • background-origin
  • background-size
 

sprites:

 https://css-tricks.com/css-sprites/

雪碧图简单的定位就是background-position 

https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/CSS_Image_Sprites

原来MDN也有sprites ,所以MDN真是好东西。