CSS背景属性

background 设置背景的显示方式，是一个间歇性属性

设置顺序为：background-color background-image background-repeat background-attachment background-position

属性：

        background-color 背景颜色

        background-image 背景图片

        background-repeat 背景平铺方式

        background-attachment 背景图片固定方式

        background-position 背景图片位置

        background-size 背景图片尺寸

        background-origin 背景图片显示区域

        background-clip 背景显示区域

        inherit 继承父级元素的背景属性样式

背景颜色（background-color）

        background-color 属性设置元素的背景颜色

        元素背景范围

        background-color属性为元素设置一种纯色。这种颜色会填充元素的内容、内边距和边框区域，扩展到元素边框的外边界（但不包括外边距）。如果边框有透明部分（如虚线边框），会透过这些透明部分显示出背景色。

        取值：

                transparent 默认，透明背景

                color_name 颜色名称，比如red

                hex_number 十六进制颜色，比如#ff000

                rgbb_number  rgb 色值，比如rgb（255，0，0）或者rgba（255，0，0，.2）

                inherit 继承父元素背景色

div {
    background-color: red;
}
h1 {
    background-color: #ff0000;
}
p { 
    background-color: rgb(255, 0, 0);
}

  背景图片（background-image）

        background-image 属性设置元素的背景图⽚，元素的背景占据了元素的全部尺⼨，包括内边距和边框，但不包括外边距。 默认，背景图像位于元素的左上⻆，并在⽔平和垂直⽅向上重复。

        

p {
    background-image:url("./img.jpg")
}

背景平铺（background-repeat）

background-repeat 属性设置是否重复背景图像。

         取值：

                repeat 默认值，⽔平垂直⽅向上平铺

                no-repeat 不平铺

                repeat-x ⽔平⽅向平铺

                repeat-y 垂直⽅向平铺

​
div {
    background-repeat:no-repeat; // 不平铺
}
div {
    background-repeat:repeat; // 默认值，⽔平垂直⽅向上平铺
}
div {
    background-repeat:repeat-x; // ⽔平⽅向平铺
}
div {
    background-repeat:repeat-y; // 垂直⽅向平铺
}

​

背景图片固定（background-attachment）

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

        取值：

               scroll 默认值。背景图像会随着⻚⾯其余部分的滚动⽽移动

                fixed 当页面的其余部分滚动时，背景图像不会滚动

​
div {
    background-image:url("");
    background-repeat:no-repeat;
    background-attachment:fixed;
}
div {
    background-image:url("");
    background-repeat:no-repeat;
    background-attachment:scroll;
}

​

背景定位（background-position）

background-position 属性设置背景图像的起始位置。 这个属性设置背景原图像的位置，背景图像如果要重复，将从这⼀点开始。

         取值：

                上下 左右 第一个位置定义上下的位置（top/center/bottom），第二个定义左右位置(left/center/right)，如果仅定义一个值，第二个值为 center

                x y 第一个值为水平位置，第二个为垂直位置，可以是百分比或者px，如果仅定义一个值，第二个值为50%

​
div {
    background-position: top left;
}
div {
    background-position: center;
}
div {
    background-position: 20% 60%;
}
div {
    background-position: 0 10px;
}
div {
    background-position: 50% 10px;
}

​

背景图片尺寸（background-size）【CSS3】

background-size 属性规定背景图像的尺寸。

        取值：

                length 设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。

                percentage 以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。

                cover 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。

                contain 把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。

​
div {
    background-size:80px 60px;
}
div {
    background-size:50% 50%;
}
div {
    background-size:cover;
}
div {
    background-size:contain;
}

​

背景图片显示区域（background-origin）【CSS3】

background-origin 属性规定 background-position 属性相对于什么位置来定位。 注意：如果背景图像的 background-attachment 属性为 "fixed"，则该属性没有效果。

        取值：

                padding-box 默认值，背景图像相对于内边距定位

                border-box 背景图像相对于边框定位

                content-box 背景图像相对于内容边框定位

​
div {
    background-origin:padding-box;
}
div {
    background-origin:border-box;
}
div {
    background-origin:content-box;
}

​

 背景显示区域（background-clip）【CSS3】

        background-clip 属性规定背景的绘制区域。

         取值：

                border-box 默认值，背景填充全部

                padding-box 背景填充不包括边框

                content-box 背景只填充内容部分

​
div {
    backgorund-color:red;
    background-origin:border-box;
}
div {
    backgorund-color:red;
    background-origin:padding-box;
}
div {
    backgorund-color:red;
    background-origin:content-box;
}

​

div {
    backgorund-color:red;
    background-origin:border-box;
}
div {
    backgorund-color:red;
    background-origin:padding-box;
}
div {
    backgorund-color:red;
    background-origin:content-box;
}

雪碧图 /精灵图（CSS Sprites）

雪碧图就是将很多很多的小图标放在一张图片上,就称之为雪碧图 使用雪碧图的优势：

        将多张图片合并到一张图片中，可以减小图片的总大小。

        将多张图片合并成一张图片后，下载全部所需的资源，只需一次请求。可以减小建立连接的消耗。

​
<style>
  div{
    width: 30px;
    height: 30px;
    border: 1px solid #f00;
    background: url('./淘宝雪碧图.png') no-repeat;
  }
  .box1{
    background-position: 3px 3px;
  }
  .box2{
    /* 通过背景图片定位，调整图片的位置 */
    background-position: 3px -40px;
  }
</style>
</head>
<body>
<div class='box1'></div>
<div class='box2'></div>

​

为什么使用雪碧图 

        网站开发90%会用到小图标， 多小图标调用显示是前端开发常见的问题，如果每个小图标都单独调用一张图片， 即意味着每个小图标的显示都产生一个HTTP请求；每个请求都需要一定的性能开销，主要在请求、以及响应阶段。为了减少http请求数量，加速网页内容显示，很多网站的导航栏图标、登录框图片等，使用的并不是标签，而是CSS Sprite雪碧图。

什么样的图片适合拼成雪碧图

1. 静态图片，不随用户信息的变化而变化
2. 小图片，图片容量比较小（一些大图不建议拼成雪碧图）
3. 加载量比较大

3 iconfont阿里巴巴矢量图

除了iconfont阿里巴巴矢量图，还有其他的小图标Font Awesome 地址：iconfont-阿里巴巴矢量图标库 注册微博，git或者淘宝账号登陆

1.搜索要下载的图标（如：小米购物车）

将当前图标加入购物车

2.点击购物车下载对应的图片或者代码

图片可以直接使用，但是咱们使用的是代码

下载好的代码中有三种引入方式：class类，symbol引入，unicode引用方式

class类： a. 兼容性良好，支持ie8+，及所有现代浏览器。 b. 相比于unicode语意明确，书写更直观。可以很容易分辨这个icon是什么。 c. 因为使用class来定义图标，所以当要替换图标时，只需要修改class里面的unicode引用。 d. 不过因为本质上还是使用的字体，所以多色图标还是不支持的。

symbol引入： a. 支持多色图标了，不再受单色限制。 b. 通过一些技巧，支持像字体那样，通过font-size,color来调整样式。 c. 兼容性较差，支持 ie9+,及现代浏览器。 d. 浏览器渲染svg的性能一般，还不如png。

unicode引用： a. 兼容性最好，支持ie6+，及所有现代浏览器。 b. 支持按字体的方式去动态调整图标大小，颜色等等。 c. 但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色

各有各的优势，咱们使用的是class类的引入方式 css引入

<link rel="stylesheet" href="./iconfont.css">

html引入

<span class="iconfont icon-xxx"></span>