关于background-*的一些属性

佚名 6年前 (2019-05-13) 随笔 1923人围观抢沙发百度已收录

1、盒模型

　　盒模型从外到内一次为：margin-box、border-box、padding-box、content-box。

SRE实战互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。

2、一些background-*属性设置的相对位置

　　⑴background-position的属性值（top/right/bottom/left/center）起始位置是相对于padding-box外边沿开始的。

　　⑵当容器的大小(content的width或height加上所设置的padding值)小于图片本身大小时，图片的left、top不和border重合，但right、bottom会和border重合。

　　⑶background-color的起始位置是相对于border-box外边沿开始设置的。

　　⑷background-image的起始值是相对于padding-box外边沿设置的。

　　问题：设置背景图片位于容器的右边20px、底边20px(设置margin-right、margin-bottom属性没有效果时)解决方案如下：

　　①利用CSS3支持相对任意角偏移，在偏移量前指定关键字即可，如：background-position: right 20px bottom 20px;

　　②将background-origin属性值设置为content-box(默认的是padding-box)。

　　③利用calc()函数，以相对左上角偏移量计算，background-position: calc(100% - 20px) calc(100% - 20px)。

　　④margin-right设置后没有变化。其实margin-right是有效果的，只是在默认即标准流的情况下显示不出效果，浏览器默认是从左向右渲染，所以margin-right/margin-bottom设置不起作用。但在脱离标准流的时候(设置float：right，注意设置float：left不起作用)，margin-right效果就出来了(但我不知道margin-bottom要怎么设置，嗯！！！,

<div class="myDiv">
      <!--以下代码测试B 1、-->
      <div style="float: left; width: 40px; height: 50px; border: 1px solid #000; margin-right: 80px; margin-bottom: 200px;"></div>
 </div>

.myDiv {
    box-sizing: content-box;
    width: 230px;
    height: 180px;
    border: 10px dashed rgba(0, 0, 0,.2);
    padding: 20px; 
    /* ⑴⑵ */
    background: url(shop06QZ.png) no-repeat top left;
　　/* ⑶ */
    background-color: lightblue; 
    /* ⑷、
     * background-image: url(shop06QZ.png);   
     * background-image是相对于padding-box设置的
     * background-repeat: no-repeat;
     */
     /* ① */
     /*background-position: right 20px bottom 20px;*/ 
     /* ② */
     /*background-position: right bottom;
       background-origin: content-box;*/
     /* ③ */
     background-position: calc(100% - 20px) calc(100% - 20px);
 }

3、设置background-repeat对background-position的影响

　　以上诉代码为例， background: url(shop06QZ.png) no-repeat top left；在这段代码中可以知道，background-repeat: no-repeat、background-postion: left top。background-position的位置是相对于padding-box设置的，也就是图片不会出现在border边界上(值设大点，对比明白)，当background-repeat不为no-repeat时，如repeat-x，则背景图片与左、右边框重叠；repeat-y，则背景图片与上、下边重叠；repeat，则背景图片会从border-box外边沿开始，也就是四边被填充。

4、background-clip

没有做不到的事，只有做不成事的人