sprints & background properity

本文在于详解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/CSSImageSprites

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