CSS的背景属性和链接伪类选择器

1.背景属性

通过 CSS 背景属性，可以给页面元素添加背景样式，包括背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定、背景图片缩放等。

1.1 背景颜色

background-color 属性定义了元素的背景颜色。

background-color:颜色值;

如：background-color:red;

一般情况下元素背景颜色默认值是 transparent（透明），我们也可以手动指定背景颜色为透明色。

background-color:transparent; 

背景颜色 ，一样可以使用三种方式——分别为具体的英文颜色/十六进制/rgb形式*

background-color: pink;
background-color: #FCB27A;
background-color: rgb(57,127,253);

1.2 背景图片

background-image 属性表示元素的背景图像。实际开发常见于 logo 或者一些装饰性的小图片或者是超大的背景图片, 优点是非常便于控制位置. (精灵图也是一种运用场景) 

background-image : none | url (url) ；

背景图片属性有两个属性值，默认为无背景图none;      属性值url()，括号里面为背景图片的地址.

1.3 背景平铺

 background-repeat 属性表示在 HTML 页面上对背景图像进行平铺。

background-repeat: repeat | no-repeat | repeat-x | repeat-y 

①属性值 repeat表示背景图片沿水平和垂直两个方向分别平铺，为默认值；

②属性值no-repeat表示背景图片不平铺，只显示一次；

③属性值repeat-x表示背景图片只沿水平方向平铺；

④属性值repeat-y表示背景图片只沿垂直方向平铺；

1.4 背景图片位置 

background-position 属性可以改变图片在背景中的位置

background-position: x y;

① background-position: x y；中的x表示水平位置，y表示垂直位置，   默认为x和y均为0；越向右向下，x和y的值越大

②如果只指定一个数值，那该数值一定是 x 坐标，另一个默认垂直居中 。

background-position: 30% 30%;

③可以使用百分比表示背景图片的位置，  相对于盒子的宽度高度来说的，比如这里的30%指的就是这个背景图片所处盒子的30%。

background-position: left center;

④可以使用方位词表示背景的位置 ，如： right、left、center、top、bottom ；

⑤如果只指定了一个方位名词，另一个值省略，则第二个值默认居中对齐；

background-position-x: left;

background-position-y: bottom;

⑥x轴的位置属性和 y轴的位置属性 也可以分开写。 

1.5 背景图像固定（背景附着） 

background-attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动。 

background-attachment : scroll | fixed；

①属性值scroll表示背景图像是随对象内容滚动的；

②属性值fixed表示背景图像固定。

1.6 背景图像缩放

background-size 属性k可以设置背景图像的大小。 这个属性是CSS3特有的，之前的版本不具有.

background-size: 背景图片宽度 背景图片高度;

①属性值为： 长度|百分比|cover|contain;

②属性值设置成百分比时  这个百分比是相对于盒子而言的，比如background-size: 60%   60%;则表示这个背景图片占这个盒子宽度的60%，高度的60%；

③若background-size只指定一个精确值，那么这个值指的是宽度，高度省略了，则表示为等比例缩放；比如background-size: 60%; 其实等价于 background-size: 60% auto;

④属性值cover，表示把背景图像扩展至足够大，以使背景图像完全覆盖背景区域，实行的是等比例缩放，可能有部分背景图片显示不全

⑤属性值contain， 表示把当宽度或高度，有一者铺满盒子时就不再进行拉伸了，实行的是等比例缩放，可能有部分空白区域。

2.伪类选择器

伪类选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第1个，第n个元素。

伪类选择器书写最大的特点是用冒号（:）表示，比如 :hover 、 :first-child 。

2.1 链接伪类选择器的语法

/* a 是标签选择器 */
a { 
  color:gray; 
   }

/* href属性里面的网络地址没有在你的浏览器访问过则会显示:link伪类的颜色红色 */
a:link {
   color: red;
}
/* 地址跳转了但是没有访问成功，或者你的地址无效，也就意味着永远不能访问，那么就会一直显示：link的样式 */

/* 单击访问过的超链接样式 */
a:visited {
  color: purple;   /*你的浏览器已经成功访问过这个链接，字体颜色就会变成紫色*/
}
/* 鼠标悬停其上的超链接样式 */
a:hover {
  color: blue;   /* 鼠标经过的时候，由原来的 灰色 变成了红色 */ 
}
/* 鼠标单击未释放时的超链接样式 */
a:active {
  color: skyblue;    /*你的鼠标单击并且没有释放这个链接时，字体颜色就会变成天蓝色*/
}

2.2 注意点：

① 为了确保生效，请按照 LVHA 的循顺序声明 :link－:visited－:hover－:active。 

②记忆法：love hate 或者 lv 包包 hao 。 

③因为 a 链接在浏览器中具有默认样式，所以我们实际工作中都需要给链接单独指定样式。