一、背景
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精灵在维护的时候比较麻烦,如果页面背景有少许改动,一般就要重新修改这张合并的图片。