css进阶-背景相关属性

背景颜色

背景图

  <style>
    div{
    width:400px;
    height:400px;
    background-image:url(./paimeng.jpg);
    }
  </style>

<div>
    用div和span这种标签就算我上面也不写也会显示背景图哦，不过p和a那些标签只有有字的地方有背景图
</div>

背景平铺

如果你的区域大于背景图片的像素面积就会像上面那样会复制多出来几份

background-repeat:no-repeat;
默认是平铺
不平铺的状态是

就是不会复制多几份

repeat-x是只平铺x轴

背景位置

background-position:center center;
就是放在区域水平位置的中间，和垂直位置的中间
就是整中心咯
也可以取具体像素单位，不过都是水平位置在先 垂直位置在后

背景属性连写

和那个文字一样咯

  <style>
    div{
    width:400px;
    height:400px;
    background:yellow url(./paimeng.jpg) no-repeat left center;
    }
  </style>

背景图和img的区别

背景图需要依靠标签来支持
而图片直接就能显示
重要的用img
不重要的用背景图