CSS知识点04—背景+CSS精灵

一、背景

1、background-color 属性指定元素的背景色。

body {
  background-color: red;
}

/*为页面指定一个红色背景*/

2.background-image 背景图片

给页面添加一个图片背景

值：url（"图片路径"）

background-image: url(图片路径.jpg);

也可以同时添加两张图片：

background-image: url(图片1.jpg),url(图片2.jpg);

3.background-repeat 背景平铺方式

值	解释
repeat	默认 水平垂直都平铺
no-repeat	不平铺
repeat-x	水平平铺
repeat-y	垂直平铺

background-repeat: repeat; /* 背景图片的平铺方式 默认水平垂直都重复 */
background-repeat: no-repeat;/* 背景图片不重复 */
background-repeat: repeat-x; /* 背景图片水平重复 */
background-repeat: repeat-y;/* 背景图片垂直方向重复 */

4. background-position    背景图片位置

值：x轴坐标 y坐标

        也可以分开写：

background-position-x:0; /*x坐标为0*/
background-position-y:0; /*y坐标为0*/

    x，y取值：可以数值+单位 或  百分比  或 英文单词

	background-position：left top ;/*左上 */
	background-position：right bottom;/*右下*/
	background-position：center; /*水平垂直都居中*/
	background-position：50% 0；/*水平居中*/
	background-position：50%； /*水平垂直都居中*/
	background-position：0% 100%; /*左下*/

 5. background-size 背景图片的大小

• width height 设置图片的宽和高，一般只设置一个，否则可能会造成变形。
• contain 包含 把背景图片等比例扩展至最大尺寸，以使它的宽和高适应整个背景区域 可能背景区域有留白。
• cover 覆盖 把背景图片等比例扩大至足够大，以使它铺满整个背景区域可能会使图片裁剪。

background-size: 500px;
background-size: 50%; /* 容器的50% */
background-size: 100%;
background-size: contain;  
/*  包含 把背景图片等比例扩展至最大尺寸,以使背景图片的宽度或高度适应背景区域, 可能背景区域有留白 */
background-size: cover;  
/*  覆盖 把背景图片等比例扩大至足够大,以使背景图片铺满整个背景区域, 可能使图片裁剪 */

 6.background-attachment 背景图片是否固定

• scroll 默认 背景图片随页面滚动
• fixed 背景图片固定不动

background-attachment: fixed; /* 固定不动 */
background-attachment: scroll; /* 默认 背景图片随网页滚动 */

7. background-origin 渲染位置

background-origin: padding-box; /* 从内边距的padding位置渲染 */
background-origin: content-box; /* 从内容区域渲染 */
background-origin: border-box;/* 从border位置渲染 */

8.简写

background : bg-color值    bg-image值   bg-repeat值   bg-position值 / bg-size值   bg-attachment值 ；

没有先后顺序   例如：

background: #FF0000 url(images/pj2.jpeg) no-repeat 50% 20% / 500px scroll;

二、CSS精灵

1. 原理

        css精灵（CSS Sprites）是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。对于当前网络流行的速度而言，不高于200KB的单张图片的所需载入时间基本是差不多的，所以无需顾忌这个问题。

2. 优点

• 在一定程度上减少了页面的加载速度，也一定程度上缓解了服务器的压力。
• 减少了图片的字节，资源利用率高。
• 解决了网页设计师在图片命名上的困扰，只需对一张集合的图片上命名就可以了，不需要对每一个小元素进行命名，从而提高了网页的制作效率。
• 更换风格方便，只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变。效率高。

3.缺点

• 在图片合并的时候，需要把多张图片有序的合理的合并成一张图片，还要留好足够的空间，防止板块内出现不必要的背景；如果是在宽屏，高分辨率的屏幕下的自适应页面，图片如果不够宽，很容易出现背景断裂；
• CSS精灵在开发的时候比较麻烦，你要通过工具测量计算每一个背景单元的精确位置，很繁琐；
• CSS精灵在维护的时候比较麻烦，如果页面背景有少许改动，一般就要重新修改这张合并的图片。