并非职业前端人，不会随时都在写前端代码！作为一个前端开发的爱好者而言，会经常记不住各CSS元素和属性。近期在开发一个项目的过程中，发现对背景属性的CSS掌握非常不牢靠。所以今天花时间进行梳理，并记录在博客中，方便日后查询。

CSS背景属性

背景色和背景延伸

背景颜色可以通过增加内边距padding来扩大范围

//css   
 <style>
        .back{
            color: white;
            background-color: teal;
            padding: 20px;/*增加边距*/
        }
    </style>
//html
        <h1>
            CSS背景属性
        </h1>
        <div class="back">
            背景色延伸
        </div>
        <div class="tes">
            背景颜色可以通过增加内边距padding来扩大范围
        </div>

我是打酱油的文字

设置一张背景图片

  <style>
        .backi{
            background-image: url(http://www.yysweb.me/wp-content/uploads/2017/12/dDZSL6Avpi-1024x681-150x150.jpg);/*这里设置的图片，已url形式，未设置背景图像的重复方位，默认会垂直和水平方向铺满*/
            padding: 20px;
            color: white;
            font-size: 30px;
            background-color: teal;
        }
    </style>
        <div class="backi">
            我是打酱油的文字
        </div>
        <div class="tes">
            设置一张背景图片
        </div>

以上就设置元素背景属性的2个最基本基础。以下列出最重要的属性，为了让页面没那么大，就不再进行CSS央视的展示了

1、设置背景图像的重复方向

background-repeat： no-repeat /*不在任何方位平铺*/ 
background-repeat：  repeat-x  /*X轴平铺，即水平方向平铺*/  
background-repeat：  repeat-Y  /*Y轴平铺，即垂直方向平铺*/

2、设置背景图像的位置

background-position:center;/*背景图位于中间位置，同样可以使用其他关键字，left，right等等*/
background-position:50% 50%;/*背景图位于元素中的百分比，默认是0% 0%，就是左对齐和顶部对齐，因此，如果你想把一个图像放在水平方向 2/3、垂直方向 1/3 处，可以设置 background-position:66% 33%;*/

3、设置背景图像是否跟随滚动

background-attachment:scroll 他会跟随内容一起滚动，也是默认值
background-attachment:fixed 图像在固定的位置，内容滚动图像不动

CSS背景属性的巩固和记录

CSS背景属性