background-color、background-image、background-attachment、background-position等属性详解

background-color背景颜色

background-color背景颜色是包含边框border，边框如果不设置颜色，默认会采用文本颜色，而文本颜色默认是黑色。

background-image背景图片

background-image背景图片占据了元素的全部尺寸，包括内边距padding和边框border，但不包括外边距margin。默认背景图片位于元素的左上角，并且在水平和垂直方向重复。

background-repeat背景重复

background-repeat只在设置了正确的background-image的值的情况下才有意义，它是描述是否以及如何重复背景图片。

（1）background-repeat的值对于背景图片覆盖范围是否包含元素边框border有影响？

background-repeat的值对于背景图片覆盖范围是否包含边框border没有影响。不过实际代码开发中如果背景图片尺寸大于元素内容+边框的尺寸，那么在展现形式上会有一定影响。

     div{
        width:500px;
        height:500px;
        padding:50px;
        border:10px dashed  black;
        background-image:url(少妇.jpg) ;
        float:left;
        margin:10px;
     }

     div.repeat{
         background-repeat:repeat;
     }
     div.noRepeat{   
        background-repeat:no-repeat;
         
     }

    <div class="repeat"></div>
    
    <div class="noRepeat"></div> 

在实际浏览器中展示效果：

class="repeat|"的div所有边框均有图像，而class="repeat|"的div上、左边框均没有图像。这是因为浏览器默认的background-origin值为padding-box,即坐标原点默认为内容盒子的左上角顶点。如果图片不重复，那么左上边框自然不会包含背景图像了。

background-attachment背景依附

设置元素背景图片的显示方式

background-attachment:scroll | fixed;

说明：scroll:默认值，背景图片随滚动条滚动。

fixed:当页面的其余部分滚动时，背景图片不会移动。

（1）fixed定位是相对于整个网页（浏览器窗口）定位，而非容器？

 

background-positon背景位置

元素背景图片定位

设置元素背景图片的起始位置

background-position:百分比 | 值

top | right | bottom | left | center

值	说明	注意
长度值（x y）	第一个值水平位置，第二个值垂直位置，左上角0 0	只写一个的话，第二个默认居中
百分比（x% y%）	第一个值水平位置的百分比，第二个值垂直位置的百分比。 左上角0% 0%，右下角100% 100%。如果仅仅规定了一个值，那么另一个将是50%。	只写一个的话，第二个默认居中
top	顶部显示，相当于垂直方向0	只写一个的话，第二个默认居中
right	右边显示，相当于水平方向100%	只写一个的话，第二个默认居中
bottom	底部显示，相当于垂直方向100%	只写一个的话，第二个默认居中
left	左边显示，相当于水平方向0	只写一个的话，第二个默认居中
center	居中显示，相当于水平方向50%或者垂直方向50%	水平、垂直方向都居中

 

 

 （1）background-position中采用em单位时，em是相对于该元素字体大小吗？

background-size背景尺寸

可以通过background-size设置背景图片的尺寸。