背景属性和精灵图

背景属性

定义

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

取值

• transparent 默认，透明背景
• color_name 颜色名称，比如red
• hex_number 十六进制颜色，比如#ff000
• rgb_number rgb色值，比如rgb(255,0,0)或者rgba(255,0,0,.2)
• inherit 继承父元素背景色

背景图片

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

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

背景平铺

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属性设置背景图像是否固定或者随着页面的其余部分滚动

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属性设置背景图像的起始位置

这个属性设置背景原图像的位置，背景图像如果要重复，将从这一点开始

取值

• 上下 左右 第一个位置定义上下的位置（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)

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

• length 设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。
• percentage 以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。
• cover 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。
• contain 把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。

背景图片显示区域

background-origin属性规定background-position属性相对于什么位置来定位

注意：如果背景图像的background-attchment属性为fixed，则该属性没有效果

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

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

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

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

背景显示区域

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;
}

2雪碧图/精灵图

精灵图就是将很多很多的小图标放在一张图片上，就称之为雪碧图

优势：

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

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

在雪碧图中找图表的位置工具

Generate Vertex List/Rect for sprite sheets (kmdjs.github.io)

 

2.1  为什么使用雪碧图

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

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

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

3 iconfont阿里巴巴矢量图

除了iconfont阿里巴巴矢量图，还有其他的小图标Font Awesome 地址：iconfont-阿里巴巴矢量图标库iconfont-国内功能很强大且图标内容很丰富的矢量图标库，提供矢量图标下载、在线存储、格式转换等功能。阿里巴巴体验团队倾力打造，设计和前端开发的便捷工具http://www.iconfont.cn/ 注册微博，git或者淘宝账号登陆

1.搜索要下载的图标，找到想要的图标，将当前图标加入购物车

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

3.下载好的目录

 

下载好的代码中有三种引入方式：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>