css3 - background-color 和background-iamge 的显示范围变化

CSS2元素背景的显示范围与CSS2.1、CSS3并不相同。在CSS2中，背景的显示范围
是指内部补白（padding)之内的范围，不包括边框；而在CSS2.1至CSS3中，背景在格
个盒模型中，它是布满整个元素的盒子区域的，并不是从内部补白（padding)开始，只不
过边框部分遮住了部分background、但有一点需要注意，当元素的background-repeat为
no-repeat时，background-color是从元素的边框左上角起到边框右下角止，而hackground
image却不一样，从内部补白（padding)边缘的左上角起到元素边框（border)的右下
角边缘止；当元素background-repeat的值为repeat时，background-color此时完全在
hackground-image之下，而且background-image从元素边框左上角起到元素边框右下角止，
但background-position的起始点却是从元素的内部补白（padding）外边缘开始。

看如下例子

     <div class='repeat'></div>
     <div class='no-repeat'></div>

div{
    width:300px;
    height:100px;
    border:50px dashed rgba(0,0,0,0.8);
    background:rgba(0,25,25,0.3 ) url('https://image.zhangxinxu.com/image/study/s/s256/mm1.jpg') no-repeat;
    padding:30px;
    margin:20px;
}
.no-repeat{
    background-repeat:no-repeat;
}
.repeat{
    background-repeat:repeat;
}

截图对比。