CSS中的背景和图片的区别

1.background-color:颜色；

背景颜色

2.background-imge:url(路径);

盒子有多大就能看到多大的背景图片，如果盒子比较大，那么会自动平铺

3.background-repeat:;背景平铺

当值 为repeat的时候背景为平铺
当值为no-repeat的时候背景为不平铺
repeat-x沿x轴平铺
repeat-y沿y轴平铺

4.background-attachment:;

背景是否跟随滚动
scroll滚动
fixed固定

5.background-position:;

取值：1、方位名词
left right top bottom center这些取值
方位名词书写顺序不论
right top右上角
left top左上角
right bottom右下角
left bottom左下角
2、像素
background-position: 100px 200px;
以盒子的左上角为原点，构建一个坐标系，水平向右，垂直向下
第一个值代表水平位置，第二个值代表垂直位置
3、百分比
以父元素的高度和宽度为占几成
4、混写
background-position:100px center;
水平x轴是100px;
垂直y轴是跟盒子居中；
或者：
background-position:center 100px;
水平x轴是居中的；
垂直y轴是100px;

5、背景的简写形式

background: 背景颜色 背景图片地址 背景平铺 背景滚动 背景位置;
快捷生成方式：bg+tab键
background:#fff url() 0 0 no-repeat;

6、img和背景图片的区别

第一点不同
1、img不需要设置宽高，可以直接显示出来
2、背景图片必须设置宽高才能显示，背景撑不开容器
第二点不同
1、img是不可以在图片上写字的，字会在盒子的外部（显示不了内容，除非用定位）
2、背景是可以在图片上写文字的，字在图片的里面
在实际中作中
img一般用来做产品图片展示（经常更新）
背景图片一般来做背景 或者一些很少更新的小icon