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

喜欢ヅ旅行 2022-04-22 05:34 205阅读 0赞

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{
        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;
    }

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1c3RfY3ls_size_16_color_FFFFFF_t_70][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1c3RfY3ls_size_16_color_FFFFFF_t_70 1][]

截图对比。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1c3RfY3ls_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20181102153459440.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1c3RfY3ls,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1c3RfY3ls_size_16_color_FFFFFF_t_70 1]: /images/20220422/f92fe4d0174643219254c2c777266055.png