CSS-背景属性

a标签的伪类

普通类需要给标签设置对应的class属性值，才能选中标签，类选择器后面添加的属性，会立即加载到浏览器之上。
伪类不需要给标签添加任何属性，伪类名都是语法提前规定好的，书写时伪类必须搭配其它选择器使用，伪类选择器后面添加的样式不一定立即加载到浏览器之上，只有用户触发了对应的行为，伪类的样式才会立即加载。
伪类选择器的权重与普通的类选择器相同。
a标签可以根据用户的行为不同，划分为四种状态，通过a标签的伪类可以设置四种状态去加载对应的效果。

   a:link{}  /*访问前的状态。*/
   a:visited{} /*访问后的状态。*/
   a:hover{} /*鼠标悬浮状态。*/
   a:active{} /*点击鼠标的状态。*/
   /*后写的层叠掉先写的，所以书写顺序必须是：link，visited，hover，active。
   常用的设置方法：可以将四种状态设置为相同样式，用伪类选择器设置鼠标移上时不一样的样式属性。*/

背景属性
综合属性 background。

可以有1-5个属性值，值用空格进行分开。背景定位的两个属性值算作一个属性值，不能分开也不能颠倒顺序。5个属性值之间可以互换位置。background:url() no-repent center top fixed #fff;
注意：如果没有设置的属性值，则按默认加载。如果想去成叠综合属性中的一部分，其它属性保持不变，最好使用单一属性写法进行层叠。

背景颜色 background-color
背景图片 background-image。给盒子添加图片的背景修饰。

加载范围：默认的加载到边框及以内部分。后期如果图片不重复加载，加载从border以内开始。
属性值：url(图片路径)
背景图和背景颜色可以同时设置，有图片的区域会压盖背景颜色，没有图片会显示背景颜色。

背景重复 background-repeat。背景图是否进行重复加载。

background-repeat:repeat /*重复，默认属性，背景图片会重复加载填满整个盒子背景区域*/
background-repeat:no-repeat /*不重复加载*/
background-repeat:repeat--x /*水平重复*/
background-repeat:repeat--y /*垂直重复*/

背景定位 background-position。主要设置不重复的图片在背景区域的加载开始位置。

属性值：单词表示法，像素表示法（有正负），百分比表示法(100%代表水平方向，等于盒子的border以内的背景区域宽度减去图片的宽度)。第一个属性值表示背景图片的水平方向，第二个属性值表示垂直方向。
水平方向：left center right
垂直方向：top center bottom

 background-position: /*50% 50%;*/
 background-position: /*20px 20px;*/
 background-position: /*left bottom;*/

背景附着 background-attachment。设置的是背景图片是否要随着页面的或者盒子的滚动而滚动。 属性值：

scroll 滚动的，表示背景图片与盒子保持相对位置不变，随着页面的滚动而滚走。不设置则为默认。

background-attachment: scroll;  

fixed 固定的，参考点是浏览器的左上顶点，左上顶点是不变的，导致页面背景图固定在浏览器窗口的固定位置，不会随着页面的滚动而滚走。

   background-attachment: fixed;

背景图替换插入图：

h1权重最大，可以在h1标签中放如a标签。但是h1中就不可以写入文字。可以将插入图换成背景图，将a标签转换为块级元素，在进行设置。
隐藏文字：给a标签一个text-indent属性，属性值为负的很大值，文字就会走到盒子的外部，直接在设置溢出隐藏属性，将文字隐藏。

a {
    display: block;
    width: 200px;
    height: 200px;
    background-image: url(../资料/01-02-code/01-02-01-CSS核心样式/images/cat1.jpg);
    text-indent:-1000px;
    overflow: hidden;
}

padding区域背景图：

在一个盒子中有背景图部分，而且有文字内容，文字会让开背景图区域进行加载，背景图应该使用padding挤出位置。
四个方向的padding都可以添加背景图。

精灵图技术：减少服务器的接受和发送请求的次数，提高页面的加载速度，出现了CSS精灵技术(也称CSS Sprites，CSS 雪碧)

将很多小图集中到一张大图(透明的png)上面，根据图片定位来进行图片的应用。
精灵图上放的都是小的装饰性图片，插入图不能往上放。

css3新增背景属性：

背景半透明的写法rgba，取值在0-1之间，0表示完全透明，0.5半透明，1不透明。
字体和边框都可以用rgba
background-size 设置背景图片的尺寸

background-size:px /*只设置一个值，垂直方向等比拉升；两个值，按设置值加载。*/
background-size:% /*同像素设置方法，参照盒子的宽高。*/
background-size:cover /*自动调整缩放比例，使背景图片完全覆盖背景区域，溢出部分则被隐藏。*/
background-size:contain /*自动调整缩放比例，把图像扩展至最大尺寸，保证图片始终完整显示在背景区域。*/

多背景 background-image：以逗号分隔多背景的url路径地址。加载时，先写的背景压盖后写的背景图。

background-image: url(),url()

更多开发中的小细节请点击。