background中容易混淆的小问题(百分比)

background中那些事

第一次写博客，鼓励一下自己，以后每一天都要进步。

最近在网上看了一些关于background的视频，觉得里面有一些容易混淆产生错误的地方，在这里举些例子进行说明，希望能给大家帮助

1. background-后缀
如果多个background写在一起，而background后面没有注明是添加什么，那么写在前面的background内容不会显示，全部被最后一个background所覆盖。
如下：在只显示一张小图片的情况下，容器其他部分不会显示出红色。（images/3.png大小为106*106）

    #m1{
        width: 400px;
        height: 300px;
        background: #f00;
        background: url(images/3.png) no-repeat;
    }

第一个作为背景颜色的可以不加后缀，但是后面加背景图片需要加上后缀。此时背景和图片可以共存，因为背景图片的层级是高于背景颜色的。
（注：页面上同时存在背景图片和颜色的时候还需要考虑两者搭配在一起的美观性）

    #m2{
        width: 400px;
        height: 300px;
        background: #f00;
        background-image: url(images/3.png);
        background-repeat: no-repeat;
    }

2. background-repeat
当设置背景图片在某个方向上平铺之后，如repeat-y，此时设置它的x，y轴定位。
那么平铺的图片在y轴上，是在平铺图片内部产生一个移动的效果，而在x轴上则是平铺图片整体移动的效果。

    #m3{
        width: 400px;
        height: 300px;
        background: #f00 url(images/3.png) repeat-y;
        background-position: 40px 40px;     
    }

3. background-position(重点)
我想着重强调的是，background-position中数值和百分比之间的区别
如下：div宽度为400px，而#m5中图片的左边距大于#m6，这是因为在background-position中，在使用百分比的情况下，边距=(容器的宽度-图片宽度)*百分比，而不是单纯的容器宽度乘以百分比。

    #m4{
        width: 400px;
        height: 300px;
        background: #f00 url(images/3.png) no-repeat;
        background-position: 200px;
        /*background-position:;*/
        /*若background-position后面没有跟数字，则默认为0*/   
    }
    #m5{
        width: 400px;
        height: 300px;
        background: #f00 url(images/3.png) no-repeat;
        background-position: 50%;
        /*距离=（父级长度-图片长度）*百分比*/
    }

当容器设置了内边距和外边距，计算图片的定位距离时，内边距会算内，外边距不算在内。

    #m6{
        width: 400px;
        height: 300px;
        margin-left: 50px;
        padding-left: 50px;
        background: #f00 url(images/3.png) no-repeat;
        background-position: 50%;
    }

当图片宽度和容器宽度一样，定位使用百分比计算时，不论百分比为多少，图片的位置都不会改变，因为此时容器宽度-图片宽度为零，使用数值的话，图片位置才会移动。（images/1.png大小为400*200）

    #m7{
        width: 400px;
        height: 300px;
        background: #f00 url(images/1.png) no-repeat;
        background-position: 50%;
        /*background-position: 50px;*/
    }

若百分比为负值，图片宽度大于容器宽度时，大家可能会觉得图片的定位会是一个负值，图片会向上向左偏移，其实不然。图片会显示在块里，距离左边和上边会有一定的距离。这是因为容器宽度-图片宽度为负值，与百分比相乘则负负得正，所以相当于是一个正数的数值。（images/2.png大小为500*500）

    #m8{
        width: 400px;
        height: 300px;
        background: #f00 url(images/2.png) no-repeat;
        /*background-position: -20px;*/
        background-position: -10% -10%;
    }

除了数值和百分比，还可以使用left right center，top bottom center进行定位。
css中定义，水平距离在前，垂直距离在后，所以要按照书写格式编辑。若是left 20px这样混合的写法是可以的，如果是top 20px，系统则会认为无效，如果是 bottom right，属于强制性写反，系统虽然会默认这种行为，但是建议大家最好不要这样写，避免不必要的bug。
之所以写单词系统可以识别，是因为系统知道此单词是属于水平还是垂直的，而数值和百分比系统并不能判断出来你是针对x还是y写的，所以不会有强制性。

    #m9{
        width: 400px;
        height: 300px;
        background: #f00 url(images/3.png) no-repeat;
        /*background-position: left 20px;*/
        /*background-position: top 20px;*/
        background-position: bottom right;
        /*若是强制性写反，系统则会默认这种行为，但是最好不要。
        因为单词系统知道是属于水平还是垂直的，而数值和百分比并不能判断出来，所以不会有强制性*/
    }

以上是本人在background方面的一些总结，大家有觉得不对的地方可以留言讨论，以后会继续改进，继续完善