css属性之 background-size origin position

css 背景background-size origin position

background-size
- 在no-repeat情况下，如果容器宽高比与图片宽高比不同
  - cover：图片宽高比不变、铺满整个容器的宽高，而图片多出的部分则会被截掉；
  - contain:图片自身的宽高比不变，缩放至图片自身能完全显示出来，所以容器会有留白区域；
- 在repeat情况下：cover:与上述相同；contain:容器内至少有一张完整的图，容器留白区域则平铺背景图，铺不下的再裁掉。
- 该属性还可以设置百分比或者具体像素值 background-size: length|percentage|cover|contain;
background-origin

属性规定背景图片的定位区域。

image.png

/*在 content-box 中定位背景图片：*/
    div
    {
        background:url(bg_flower.gif);
        background-repeat:no-repeat;
        background-size:100% 100%;
        -webkit-background-origin:content-box; /* Safari */
        background-origin:content-box;
    }

background-clip

规定背景的绘制区域。
- 语法
  background-clip: border-box|padding-box|content-box;
- border-box 背景被裁剪到边框盒。
- padding-box 背景被裁剪到内边距框。
- content-box 背景被裁剪到内容框。
代码展示

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>background-size origin clip属性</title>
  <style>
    .img-block {
      width: 500px;
      height: 500px;
      margin: 0 auto;
      /*设置了背景图片 该颜色不会在border上显示 因为默认origin是padding*/
      background:  red;
      padding: 20px;
      border: 10px dashed dodgerblue;

      /* 1920*1080  背景图片默认显示层为padding-box*/
      background: url('./bg.jpg') no-repeat;

      /*cover：图片宽高比不变、铺满整个容器的宽高，而图片多出的部分则会被截掉；*/
      /*background-size: cover;*/

      /*图片自身的宽高比不变，缩放至图片自身能完全显示出来，所以容器会有留白区域；*/
      /*background-size: contain;*/

      /*origin: 设置背景图片的起始位置 , 默认是padding-box 表示背景图的左上角和padding盒子左上角对齐*/
      /*      背景图片可以放置于 content-box、padding-box 或 border-box 区域。*/
      /*-webkit-background-origin: content-box;
      background-origin: content-box;*/

      /*图片的裁切 在这个范围内的才显示 其他的被裁切掉*/
      /*background-clip: content-box;*/

      /*图片的左上角相对于 padding 左上角 横向右移动50px 纵向下移动50px*/
      /*如果设置了background-origin的话, 相对于设置的background进行偏移*/
      /*background-position: -50px -50px; 其偏移位置可以是负值
              表示背景图片相对于padding盒子模型左上角(不设置origin)向左移动50px 向上移动50px*/
      /*background-position: 50px 50px;*/
    }
  </style>
</head>

<body>
  <div class="img-block"> content: 500 * 500 padding: 20px; border:10px; </div>
</body>

</html>

css属性之 background-size origin position

css 背景background-size origin position

推荐阅读更多精彩内容