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;
}
截图对比。