background-clip

background-clip允许你控制背景图片或颜色延伸到一个元素的内间距(padding)或内容(content)之外的距离。

.frame {
  background-clip: padding-box;
}

值

border-box是默认值。它允许背景一直延伸到元素边框(border)的外边缘。

padding-box 在元素内间距(padding)的外边缘处剪切背景，并且不允许背景延伸进边框(border)。

content-box 在元素内容盒子的边缘剪切背景。

inherit将父级的background-clip设置应用于所选元素。

演示

background-clip在行动中得到最好的阐释，因此我们将两个演示放在一起以展示它是如何工作的。

第一个演示，每个div内部都有一个段落。段落是div的内容。每个div有一个黄色背景和一个5像素、半透明的浅蓝色边框。

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <title>background-clip</title>
  <meta name='description' content='background-clip'>
  <meta name='keywords' content='background-clip'>
  <style>
    div {
      background-color: yellow;
      width: 225px;
      padding: 1em 0;
      border: 5px solid rgba(156, 224, 251, .5);
    }

    .nomargin {
      margin: 0;
    }

    #border-box {
      background-clip: border-box;
    }

    #padding-box {
      background-clip: padding-box;
    }

    #content-box {
      background-clip: content-box;
    }

    /* 外围样式, 与background-clip无关 */

    body {
      font-family: sans-serif;
    }

    div {
      margin-bottom: 2em;
    }
  </style>

</head>

<body>
  <h2>background-clip: border-box;</h2>
  <div id="border-box">
    <p>This paragraph is the content.</p>
  </div>

  <h2>background-clip: padding-box;</h2>
  <div id="padding-box">
    <p>This paragraph is the content.</p>
  </div>

  <h2>background-clip: content-box;</h2>
  <h3>browser default paragraph margins</h3>
  <div id="content-box">
    <p>This paragraph is the content.</p>
  </div>

  <h2>background-clip: content-box;</h2>
  <h3>paragraph is set to margin: 0;</h3>
  <div id="content-box">
    <p class="nomargin">This paragraph is the content.</p>
  </div>
</body>

</html>

background-clip: border-box;

This paragraph is the content.

background-clip: padding-box;

This paragraph is the content.

background-clip: content-box;

浏览器默认段落margin值

This paragraph is the content.

background-clip: content-box;

段落设置 margin: 0;

This paragraph is the content.

默认情况下或者设置为background-clip:border-box;，黄色背景一直延伸到边框的外边缘。请注意边框看起是绿色的，是因为它下方有黄色背景。

当background-clip改变为padding-box时，背景颜色在元素填充(padding)结束的位置就停止了。请注意边框是蓝色的，是因为背景不允许进入边框区域。

使用background-clip:content-box;，背景颜色仅仅适用于div的内容，在本例中是单个段落元素。div的填充和边框并没有背景颜色。但是，还有值得一提的小细节：颜色延伸到内容的空白区域。查看第一个和第二个例子与使用content-box之间的差异。

第一个content-box示例，浏览器默认margin值应用于段落，背景在段落margin区域之外剪切(这里是指背景区域包括了段落的margin区域，但是在段落margin之外就没有div的背景颜色区域了。)。在第二个例子中，在CSS中设置margin值为0，背景在文本边缘开始剪切。

下面交互性展示带有背景图片的background-clip。此演示中的内容是一个较小的空div。

  <div class="box " id='border-box'>
    <div class="little_box"></div>
  </div>
  <div class="box " id='padding-box'>
    <div class="little_box"></div>
  </div>
  <div class="box " id='content-box'>
    <div class="little_box"></div>
  </div>

　　

    .box {
      position: relative;
      background: #545454 url(images/clipboard.png);
      height: 200px;
      width: 200px;
      margin: 0 auto;
      border: 18px solid rgba(0, 0, 0, 0.2);
      background-clip: border-box;
      background-origin: border-box;
      background-size: cover;
      background-repeat: no-repeat;
      padding: 30px;
      margin:2em auto;
    }

    .little_box {
      text-align: center;
      color: white;
      font-size: 1.5em;
      width: 100%;
      height: 100%;
      padding: 4px;
      box-sizing: border-box;
    }

    #border-box {
      background-clip: border-box;
    }

    #padding-box {
      background-clip: padding-box;
    }

    #content-box {
      background-clip: content-box;
    }

border-box

 

 

 

padding-box

 

content-box

 

此演示也是应用于background-size：cover和background-repeat:no-repeat加上background-clip来控制背景图片，否则图片将重复平铺到裁剪位置。

文本

有一个引擎前缀版本，可应用于将背景剪切为文本。为了看到这项工作，文本也需要透明。幸运的是，还有另外一个浏览器前缀文本颜色属性，它可以有效覆盖颜色，由于它有一个回退使其可以安全使用。

.background-clip-text { 
  /* 如果我们可以裁剪, 就那么做吧 */
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  /* 通过文本会展示什么
      ~ 或者 ~
    那个元素的背景是什么 */
  background: whatever;

  /* 回退文本颜色
      ~ 或者 ~
      文本的实际颜色，它更适合在背景上起作用 */
  color: red;
 
}

Firefox, Chrome, and Safari 支持这个属性.

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <title>background-clip</title>
  <meta name='description' content='background-clip'>
  <meta name='keywords' content='background-clip'>
  <style>
    @import url(https://fonts.googleapis.com/css?family=Syncopate);

    body {
      background: black;
      text-align: center;
      padding: 120px 20px;
    }

    h1 {
      display: inline-block;
      font-size: 80px;
      line-height: 0.9;
      padding: 20px;
      font-family: 'Syncopate', sans-serif;
      text-transform: uppercase;
      background: radial-gradient(circle farthest-corner at center center,
          white,
          #111) no-repeat;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  </style>

</head>

<body>

  <h1>mega<br>fancy</h1>

</body>

</html>

　　

posted @ 2019-08-27 18:21  请叫我二狗哥  阅读(602)  评论(0)    收藏  举报