background用法

作者: 給我小鱼干 | 来源:发表于2019-02-27 14:17 被阅读0次

一、背景图定位方法
1.background-position

微信截图_20190227113831.png

2.background-origin
每个元素身上都存在三个矩形框：border box（边框的外沿框）、padding box（内边距的外沿框）和 content box（内容区的外沿框）。默认情况下，background-position 是以 padding box 为准的，这样边框才不会遮住背景图片。因此，top left 默认指的是padding box 的左上角。

微信截图_20190227113846.png

3.calc()

微信截图_20190227141639.png

二、条纹背景

<style>
    .box{
      position: absolute;
      margin: auto;
      top:0;
      left:0;
      right:0;
      bottom:0;
      border-radius: 5px;
      width: 200px;
      height: 100px;
      background: #58a;
      background-image: repeating-linear-gradient(30deg,
        hsla(0,0%,100%,.1),
        hsla(0,0%,100%,.1) 15px,
        transparent 0, transparent 30px);
    }
  </style>
</head>
<body>
  <div class="box">
  </div>
</body>

条纹.png