理清CSS3中background新增属性

作者: 深度剖析JavaScript | 来源:发表于2020-08-25 12:35 被阅读0次

理清CSS3中background新增属性
CSS3 background-clip 和 backgroun
CSS3之背景
background-origin和background-cli
背景图片相关
CSS3 背景
day23-CSS-背景相关属性
CSS3背景裁切属性——background-clip
CSS3 新增属性：背景
渐变色border

为了不搞混，我将背景相关的属性整理成下图

在CSS3中，关于background新增了三个子属性
1. background-origin
2. background-clip
3. background-size

先来看background-origin，这里铺垫一下background-position，我们知道background-position是用于设置背景图片在元素中出现的位置

<style>
  :root,body{
    height: 100%;
    margin: 0;
  }
  body{
    background-image: url("./bg.jpg");
    background-repeat: no-repeat;
    background-position: 100px 100px; 
  }
</style>

结果
可以看到背景图在body中出现的位置是在距离左边100px，距离上边100px的地方。
而background-origin是用于设置背景图在计算background-position时的参考点位置

取值包括：border-box padding-box content-box三个，分别表示从border区域开始显示图片，从padding区域开始显示背景图片，以及从内容区域开始显示背景图片。默认是padding-box

<style>
  :root,body{
    height: 100%;
    margin: 0;
  }
  body div{
    width: 400px;
    height: 200px;
    padding: 50px;
    border: 50px solid rgba(244, 333, 0, .5);
    background-color: pink;
    background-image: url("./bg.jpg");
    background-repeat: no-repeat;
    /* background-origin: border-box; */
    /* background-origin: padding-box;
    background-origin: content-box; */
  }
</style>
<body>
  <div>
    这里是content区域，这里是content区域，这里是content区域，这里是content区域，这里是content区域
  </div>
</body>

三种情况分别如下：

分别对应border-box，padding-box，content-box

以上div中添加代码

background-origin: content-box;
background-position: 50px 50px;

结果，背景图片出现位置相对于content-box

接着来看下一个新增属性background-clip
background-clip用于背景裁剪，取值也有三个：border-box，padding-box和content-box；分别表示背景从边框区域开始裁剪，背景从padding区域开始裁剪，和背景从content区域开始裁剪

<head>
  <style>
    :root,
    body {
      height: 100%;
      margin: 0;
    }

    div {
      float: left;
      margin-left: 10px;
      width: 300px;
      height: 150px;
      padding: 50px;
      border: 10px solid rgba(244, 333, 0, .5);
      background-color: deeppink;
      background-image: url("./bg.jpg");
      background-repeat: no-repeat;
      background-origin: border-box;
    }
    div:nth-of-type(1){
      background-clip: border-box;
    }
    div:nth-of-type(2){
      background-clip: padding-box;
    }
    div:nth-of-type(3){
      background-clip: content-box;
      
    }
  </style>

<body>
  <div>
    <p>这里是content区域</p>
    <p>这里是content区域</p>
  </div>
  <div>
    <p>这里是content区域</p>
    <p>这里是content区域</p>
  </div>
  <div>
    <p>这里是content区域</p>
    <p>这里是content区域</p>
  </div>
</body>

分别对应border-box，padding-box，content-box

接着来看CSS3背景新增的最后一个属性background-size
background-size用于设置背景尺寸大小，取值可以是数值可以是百分比也可以是关键词auto、cover、contain分别表示背景图真实大小、将背景图等比缩放到完全覆盖容器（背景图有可能超出容器）、将背景图等比缩放到宽度或高度与容器的宽度或高度相等（背景图始终被包含在容器内）。
注意：该属性接受1~2个参数值。两个分别表示背景图宽度和高度；只提供一个，表示背景图宽度，而高度将依据背景图宽度进行等比缩放计算得到。另外百分比是参照背景图的background-origin区域大小进行换算的

<style>
  :root,
  body {
    height: 100%;
    margin: 0;
  }
  div {
    float: left;
    margin-left: 10px;
    width: 300px;
    height: 150px;
    padding: 50px;
    border: 2px solid rgba(244, 333, 0, .5);
    background-color: deeppink;
    background-image: url("./bg.jpg");
    background-repeat: no-repeat;
  }
  div:nth-of-type(1) {
    background-size: auto;
  }
  div:nth-of-type(2) {
    background-size: cover;
  }
  div:nth-of-type(3) {
    background-size:contain;
  }
  div:nth-of-type(4) {
    background-size:50%;
  }
  div:nth-of-type(5) {
    background-size:100px;
  }
  div:nth-of-type(6) {
    background-size:100px 100px;
  }    
</style>
<body>
  <div>
    <p>background-size: auto</p>
  </div>
  <div>
    <p>background-size: cover</p>
  </div>
  <div>
    <p>background-size:contain</p>
  </div>
  <div>
    <p>background-size: 50%</p>
  </div>
  <div>
    <p>background-size: 100px</p>
  </div>
  <div>
    <p>background-size:100px 100px</p>
  </div>
</body>