CSS的背景属性

背景颜色

background-color：值

合法的颜色值
颜色名；16进制表示；rgb；rgba

当没有设置时，默认的背景色是透明的，transparent

复制代码

   background-color: antiquewhite;
   background-color: #0000ff;
   background-color: rgb(255, 0, 0); 
   background-color: rgba(255, 0, 0,0.6);

背景图片

background-image:url（图片路径）

默认值无图片

若同时设置background-color和image则同时生效

复制代码

   background-color: rgba(255, 0, 0,0.6); 
   background-image: url('SeanXiao.png（图片地址）');

背景重复

若元素的宽高大于图片的宽高，则会发生背景重复

background-repeat:值

默认值：repeat
no-repeat不重复
repeat-x 在x轴上重复

repeat-y 在y轴上重复

复制代码

  background-image: url(duck.jpg);
  background-repeat: repeat-x;

背景尺寸

使用背景图片时，可以设置背景的宽高
background-size：宽度高度
尺寸单位：背景图片的宽度和高度是一个固定的值

复制代码

      background-size: 100px 600px;
      background-size: 10em 5em;
      //以父元素的百分比来设置图片的宽度和高度
      background-size: 50% 60%;

contain：把背景图片扩展至最大尺寸，使宽度或者高度完全适应内容区域，但保持原有的宽高比例
cover：把背景图片扩展至足够大，使背景图片完全覆盖区域，但背景图片的某些部分无法显示在元素区域中
若只设置一个值如 background-size：200px === background-size：200px auto，另一个值为auto，图片不变形，保持原有的比例

背景定位

background-position：x（水平位置） y（垂直位置）

方向定位：top bottom right left center
当只设置一个值时，另一个值为center

复制代码

      background-position: left top;
      background-position: 40px 100px;
      background-position: left;
      background-position: center center;

背景固定

background-attachment：值

scroll：下拉时，背景会随着滚动条上移
fixed：下拉时，背景不会随着滚动条上移

复制代码

      background-attachment: scroll;
      background-attachment: fixed;

背景属性简写

复制代码

background: rgba(255,0,0,0.5) url(SeanXiao.png) no-repeat 100px 100px/800px 500px fixed;

background：颜色值背景图片背景重复背景定位/背景尺寸背景固定

可以在一个属性background中设置所有的背景属性，用空格隔开
如果某个值不写，也不会出问题
使用背景属性简写输入的代码最少，浏览器对背景简写的支持度也更高

关于'背景定位/背景尺寸'

当两组值都存在时，需要用' / '隔开
当在背景简写中只出现一组值时，表现为背景定位
background: rgba(255,0,0,0.5) url(SeanXiao.png) no-repeat 800px 500px fixed; （800px 500px为背景的位置信息）
background: rgba(255,0,0,0.5) url(SeanXiao.png) no-repeat 100px 100px/800px 500px fixed; （100px 100px为背景的定位位置 信息，800px 500px为图片的尺寸大小信息）
background: rgba(255,0,0,0.5) url(SeanXiao.png) no-repeat 0 0/800px 500px fixed; （ 0 0为背景的定位位置 信息，800px 500px为图片的尺寸大小信息）