+
80
-

css中background-origin和background-clip有啥区别?

css中background-origin和background-clip有啥区别?


网友回复

+
0
-

background-origin

background-position 属性用来设置背景图像的起始位置,其默认值为top left,即元素的左上角。

可是这个“左上角”是相对于元素的什么位置(border、padding、content)来定位的,却是由属性background-origin决定的,其默认值为padding-box。

即默认情况下,背景图像从元素padding的左上角开始渲染。

background-origin的包含:  padding-box 背景图像相对于内边距框来定位。  border-box 背景图像相对于边框盒来定位。  content-box 背景图像相对于内容框来定位。 background-origin的示例如下(示例中所用的背景图片来源于网络):

background-clip

 background-clip用来规定背景(包含背景图像和背景色)的绘制区域。它定义了对背景进行裁剪的基准位置,在基准位置外的背景将直接被裁剪掉。其默认值为border-box,其值包含:  padding-box 背景被裁剪到内边距框。  border-box 背景被裁剪到边框盒。

 content-box 背景被裁剪到内容框。

我们来通过代码示例来更直观了解一下他们的区别:

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum=1.0,minimum=1.0,user-scalable=0" />

    <style>
        * {margin:0;padding:0;border:0 none;position: relative;}
    *,*:before,*:after {
      -moz-box-sizing: content-box;
      box-sizing: content-box;
    }
    html {
   background-image: url(//repo.bfw.wiki/bfwrepo/image/61dec27e73ccc.png);
      background-size: cover;
      text-align: center;
      padding-bottom: 3rem;
    }
    h1, h2 {
      font-weight: 200;
      background-image: linear-gradient(to right,rgba(0,0,0,.1), rgba(255,255,255,.7) 12%, rgba(255,255,255,.7) 88%, rgba(0,0,0,0));
      font-size: 2rem;
      line-height: 3rem;
      color: blue;
    }
    div {
      background-image: url(//repo.bfw.wiki/bfwrepo/image/61e27364c2151.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90);
      background-repeat: no-repeat;
      color: #fff;
      width: 150px;
      height: 100px;
      padding: 15px;
      border: 25px solid rgba(255,255,255,.65);
      display: inline-block;
      margin-top: 1rem;
      vertical-align: top;
      line-height:1.2;
      border-radius: 1rem;
      text-shadow: 1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000
    }
    div:nth-of-type(1) {
      Background-origin:border-box;
      background-clip: border-box;
    }
    div:nth-of-type(2) {
      Background-origin:border-box;
      background-clip: padding-box;
    }
    div:nth-of-type(3) {
      Background-origin: border-box;
      background-clip: content-box;
    }
    div:nth-of-type(4) {
      Background-origin: padding-box;
      background-clip: border-box;
    }
    div:nth-of-type(5) {
      Background-origin: padding-box;
      background-clip: padding-box;
    }
    div:nth-of-type(6) {
      Background-origin: padding-box;
      background-clip: content-box;
    }
    div:nth-of-type(7) {
      Background-origin: content-box;
      background-clip: border-box;
    }
    div:nth-of-type(8) {
      Background-origin: content-box;
      background-clip: padding-box;
    }
    div:nth-of-type(9) {
      Background-origin: content-box;
      background-clip: content-box;
    }
    </style>
</head>

<body>


    <div>b-origin: border-box;<br/>b-clip: border-box;</div>
    <div>b-origin: border-box;<br/>b-clip: padding-box;</div>
    <div>b-origin: border-box;<br/>b-clip: content-box;</div>
    <div>b-origin: padding-box;<br/>b-clip: border-box;</div>
    <div>b-origin: padding-box;<br/>b-clip: padding-box;</div>
    <div>b-origin: padding-box;<br/>b-clip: content-box;</div>
    <div>b-origin: content-box;<br/>b-clip: border-box;</div>
    <div>b-origin: content-box;<br/>b-clip: padding-box;</div>
    <div>b-origin: content-box;<br/>b-clip: content-box;</div>
</body>

</html>

我知道答案,我要回答