CSS之背景属性

背景属性

背景属性在网页设计的时候也是经常使用的，在刚刚接触到前端的时候，我们可以先学习画色块来对网页进行布局。画色块使用到最多的就是背景颜色。

background可以设置以下属性：

• background-color     背景颜色
• background-image   背景图片
• background-position   背景位置
• background-size    背景大小
• background-repeat   背景平铺
• background-origin    背景源点
• background-clip     背景裁剪

背景颜色
bockground-color: red;
bockground-color: #ff0000;
bockground-color: #f00;(只有当两两相同时才能写三个，eg: #aabb00 => #ab0)
bockground-color: rgb( 255 , 0 , 0 );
bockground-color: rgba(255 , 0 , 0 , 0.5); （最后一位为透明度，取值0-1）

背景图片及背景图片的大小、位置
1.使用：background-img:url(图片地址);
2.背景图片与在div中插入img的区别：

方式	图片>div	图片<div	文字叠加
直接插入img	超出	左上角	不可以(会在图片下面)
背景图片	超出部分隐藏	平铺	可以
注：背景图依耐于盒子本身

3.背景大小：background-size：50px 50px;
  3.1 图片平铺（一张图）且会变形：
    background-size:100% 100%；
  3.1 图片不会变形：
    宽度100%，高度自适应：
      background-size:100% auto；
      background-size:100%；
    高度100%，宽度自适应：
      background-size: auto 100%；
  3.1 图片不变形，但可能会被裁剪：
    覆盖整个盒子，图片会等比例缩放
    background-size:cover；
  3.1 图片既不变形，也不裁剪（以最大原比例放置）：
    background-size:contain；

4.设置图片平铺效果（图片大小不够，以原图大小重复放置，多图）
  background-repeat:no-repeat;  repeat-x  /   repeat-y
           不平铺   x方向平铺    y方向平铺

5.背景图片的位置：background-position
  background-position:-10px 10px;（左、上）可以为负
  background-position:center center; （right）
  background-position:50% 50%;
  如果只填写一个值，则默认第二个值为center（上下居中）

6.背景图片结合写法：
  background: url(图片地址) no-repeat center green;
  注：position不能拆开写 eg：no-repeat center green center （会报错）
不分先后位置，但是背景位置必须放在一起

  简写不能写图片大小，需要经图片大小额外写

background:no-repeat  center darkcyan url(../images/like-active.png);
background-size: 300px 200px;

background-size不能并入background中，必须写在背景图片后面才可以生效

不常用属性：
背景源点（起始位置：左上角）
  此属性完全可以被position取代
  background-origin: border-box  padding-box   content-box;
            边框开始  内边距开始  内容开始

背景裁剪（右下角）
  background-clip: border-box   padding-box  content-box;
           边框      内边距    内容

多背景叠加
  背景颜色添加在最后一个背景图片里面
  background：url() , url() , url() , red url()；
  其中如果有背景颜色的话，一定是写在最后一个逗号后面的