css --- background 二（background-clip、background-origin）_单层元素、background-clip、background-origin、background-

碎碎念：知识点梳理归纳，如果有什么不对的感谢大家指正一起学习！

1. background-clip

• 确定背景的裁剪区域
• 控制元素背景的显示区域

语法：

 background-clip ： border-box || padding-box || content-box
1

---

1.1 border-box （默认值）

• 背景延伸在边框外沿，边框之下

例1： 背景色裁剪

 .box {
        width: 300px;
         height: 300px;
         padding: 15px;
         margin: 0 auto;
         background: pink;
         background-repeat: no-repeat;
         border: 20px dashed rgba(2255, 0, 0, 0.8);
         background-clip: border-box;
     }
1
2
3
4
5
6
7
8
9
10

例2： 背景图裁剪

解析：
一样的代码，把背景色换成背景图可以看到还是有区别的。

1. background-color 的填充是从边框的的左上角到右下角
2. background-image 的填充是从边框内部开始的，（此时border有20个像素）也就是padding的左上角顶点开始的。

例3： 背景色和背景图图片混合使用

1.2 padding-box

• 边框之下没有背景，背景延伸到内边距外沿

例1： 背景色和背景图图片混合使用，配合padding-box就能让背景色和背景图在同一个位置

.box {
     width: 300px;
      height: 300px;
      padding: 15px;
      margin: 0 auto;
      background: pink url(香瓜.jpg);
      background-repeat: no-repeat;
      border: 20px dashed rgba(2255, 0, 0, 0.8);
      background-clip: padding-box;
      background-size: 100% 100%;
  }
1
2
3
4
5
6
7
8
9
10
11

例2： 为了方便看效果，我们把背景图的大小调整一下，可以看到背景色的起点位置改变了

background-size: 80% 80%;
1

对比图：

1.3 context-box

• 背景裁剪到内容区外沿

例： 只保留内容区域的背景，除去边框和间距

.box {
     width: 300px;
      height: 300px;
      padding: 15px;
      margin: 0 auto;
      background: pink url(香瓜.jpg);
      background-repeat: no-repeat;
      border: 20px dashed rgba(2255, 0, 0, 0.8);
      background-clip: content-box;
      background-size: 100% 100%;
  }
1
2
3
4
5
6
7
8
9
10
11

1.4 三种情况对比

1.5 background-clip:text

• 文本填充背景图片
• 配合其私有属性-webkit-text-fill-color: transparent

例： 透过背景的文字

.box {
       background: pink url(香瓜.jpg);
        background-repeat: no-repeat;
        height: 300px;
        padding: 15px;
        margin: 25px auto;
        font-size: 68px;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        text-transform: uppercase;
        padding-top: 77px;
        font-weight: bold;
    }
1
2
3
4
5
6
7
8
9
10
11
12
13

---

2 . background-origin

• 指定背景图片background-image 属性的原点位置的背景定位区域
• 配合background-position属性使用，设置图像的位置
• 注意：当使用 background-attachment 为fixed时，该属性将被忽略不起作用

语法: background-origin：border-box || padding-box || content-box

2.1 border-box

• 背景图片的摆放以border区域为参考

.box {
       background: pink url(香瓜.jpg);
       background-repeat: no-repeat;
       width: 500px;
       height: 300px;
       padding: 15px;
       margin: 25px auto;
       border: 10px dashed red;
       background-origin: border-box;
   }
1
2
3
4
5
6
7
8
9
10

2.2 padding-box（默认值）

• 背景图片的摆放以padding区域为参考

  .box {
        background: pink url(香瓜.jpg);
         background-repeat: no-repeat;
         width: 500px;
         height: 300px;
         padding: 15px;
         margin: 25px auto;
         border: 10px dashed red;
     }
1
2
3
4
5
6
7
8
9

2.3 content-box

2.4 三种情况对比

---

3. background-clip 与 background-origin

---

相关说明：
此文在编辑过程中找了很多资料，但没有保存链接，有问题请留言，谢谢！

Background-clip属性