0014 认识css 背景属性的详解

背景的属性

背景也就是页面的底色，纯颜色和文字的颜色调整方式都一样，
背景也可以是图片 图片的属性 长，宽 ，图片的长宽小于盒子的尺寸，图片是平铺在整个盒子 还有 拉伸，收缩等等属性。

指定图片在一个盒子的位置，背景图片不单单只作为整个页面的背景，也可以作为某个标签的背景。哪怕这个标签的长宽很小，
指定显示整个图片的固定位置的参数background-position:0 这个坐标就是显示图片的位置的坐标值。基本上小的图标都被做到一个大的图片上。
使用那个图标的话，切到图标在图片的坐标上，就能在标签上显示这个图标。

1、背景的颜色

背景的颜色 和文本的颜色显示基本一致，三种显示的方式，十六进制，英文单词，RGB 透明度
background-color: yellow;

2、背景的图片

背景的图片:

背景的图片的填充 一种情况是图片的尺寸大于盒子的尺寸，一个是图片的尺寸小于盒子的尺寸。

3、背景的常规属性

背景图小于模型

图片引用为背景图
background-image: url("123.jpeg");
取消图片的填充方式，只显示原图：
background-repeat: no-repeat;  不填充

background-repeat: repeat-x;  只横向填充
background-repeat: repeat-y; 值纵向填充
     
  

背景填充的位置移动

background-position: center center; 居中的话，可以简写成1个center
横向居中   纵向居中   right 右  left 左


background-position: -1px -1px; 左上角

三合一 简写的方式
url地址  不填充  居中显示

背景图小于模型 > 图片的优化：

指定图片在一个盒子的位置，背景图片不单单只作为整个页面的背景，也可以作为某个标签的背景。哪怕这个标签的长宽很小，
指定显示整个图片的固定位置的参数background-position:0 这个坐标就是显示图片的位置的坐标值。基本上小的图标都被做到一个大的图片上。
使用那个图标的话，切到图标在图片的坐标上，就能在标签上显示这个图标。xxxxxxxxxx 通过调节指定图片在一个盒子的位置，背景图片不单单只作为整个页面的背景，也可以作为某个标签的背景。哪怕这个标签的长宽很小，指定显示整个图片的固定位置的参数background-position:0 这个坐标就是显示图片的位置的坐标值。基本上小的图标都被做到一个大的图片上。使用那个图标的话，切到图标在图片的坐标上，就能在标签上显示这个图标。

降低访问次数