CSS属性：背景和精灵图

CSS 背景属性

常用属性

• background 属性连写
• background-color 设置元素的背景颜色
• background-image 把图像设置为背景
• background-attachment 背景图片是否跟随元素滚动
• background-position 设置背景图像的位置
• background-origin 设置背景图片偏移量的原点
• background-repeat 设置背景图像的重复方式
• background-size 设置背景图片的尺寸
• background-clip 设置背景的范围

bg-image 设置背景图片

• 可以同时设置背景图片和背景颜色，这样背景颜色将成为图片的背景色
• 如果背景图片小于元素，则背景图片会自动在元素中平铺将元素铺满
• 如果背景图片大于元素，将会有一部分背景无法完全显示
• 如果图片和元素一样大，则会正常显示

bg-repeat 设置背景图片的重复方式

• repeat 默认，背景图像将在垂直方向和水平方向重复
• repeat-x 背景图像将在水平方向重复
• repeat-y 背景图像将在垂直方向重复
• no-repeat 背景图像不重复

background-position 设置背景图像的位置

• 背景图片偏移量的原点默认为padding右上角那个点，可通过bg-origin修改
• 通过top left bottom right center几个方位词来设置背景位置，需要同时指定两个值，否则第二个值默认为center
• 通过偏移量来指定图片的位置，可为负值bg-position: -50px, 100px

background-clip 设置背景的范围

• border-box 默认值，背景会出现在边框下边
• padding-box 背景会出现在内容区和内边距
• content-box 背景只会出现在内容区

background-origin 设置背景图片偏移量的原点

• padding-box 背景图像偏移量原点为padding右上角
• border-box 背景图像偏移量原点为border右上角
• content-box 背景图像偏移量原点为content右上角

background-size 设置背景图片的尺寸

• 第一个值宽，第二个值高，只设置一个值另一个默认auto
• cover 图片比例不变，将元素铺满
• contain 图片比例不变，将图片在元素中完整显示

background-attachment 背景图片是否跟随元素滚动

• scroll 默认值，背景图像会随着页面其余部分的滚动而移动
• fixed 背景图像固定在页面中，不会随元素移动，此时背景图片偏移量的原点为视口右上角

属性连写

• 所有背景相关的属性都能在简写中设置，没有哪个属性是必须写的，没顺序要求
• size必须在position后面并且使用/隔开，orgin要在clip前面

图片加载

img属于替换元素

• 图片属于网页中的外部资源，外部资源需要浏览器单独发送请求加载
• 练习中link会首先加载，然后hover和active会在指定状态触发时加载
• 导致在第一次加载时出现闪白现象（后面会有缓存），可以用精灵图解决

精灵图方案

• 上面方案需要发送三次图片加载请求，精灵图只发送了一次
• 精灵图利用bg-position偏移量来指定图片的位置从而达到来切换不同图片的效果

精灵图

CSS Sprites 简介

• CSS Sprites叫 精灵图或者雪碧图，是一种网页图片应用处理方式，很常用
• CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中，设置一个偏移量以显示正确的图片
• 精灵图只适用于背景图，如果想给网页添加img图片，精灵图是不行的

CSS Sprites 优点

• 减少图片的字节
• 减少了网页的http请求次数 ，从而大大的提高了页面的性能
• 减少命名难的问题

CSS Sprites 的缺点：

• 在图片合并的时候，你要把多张图片有序的合理的合并成一张图片，还要留好足够的空间，防止板块内出现不必要的背景
• 在宽屏，高分辨率的屏幕下的自适应页面，图片如果不够宽，很容易出现背景断裂
• 在维护的时候比较麻烦，如果页面背景有少许改动，一般就要改这张合并的图片

CSS Sprites的使用步骤

• 先确定要使用的图标
• 测量图标的大小
• 根据测量结果创建一个大小相同的元素
• 将雪碧图设置为元素的背景图片
• 设置一个偏移量以显示正确的图片

线性渐变 link

linear-gradient() 函数

• 线性渐变是背景图片属性，需要通过background-image来实现
• linear-gradient() 函数用于创建一个线性渐变的 “图像”
• 通过渐变可以设置一些复杂的背景色，实现一个颜色向其他颜色放射性效果

径向渐变 link

radial-gradient() 函数

• 径向渐变是背景图片属性，需要通过background-image来实现
• radial-gradient() 函数用于创建一个径向渐变的 “图像”
• 通过渐变可以设置一些复杂的背景色，实现一个颜色向其他颜色过度的效果

径向渐变形状大小

默认情况下，径向渐变圆心的形状根据元素的形状而定

• 正方形 ----- 圆形
• 长方形 ----- 椭圆形

手动指定径向渐变形状大小

语法：radial-gradient(大小 at 位置，颜色 位置，颜色 位置，颜色 位置)