background-size百分比计算区域与background-origin关系实例页面

展示

代码

• HTML：

  <h4>默认 padding-box</h4>
  <div class="bg-percent"></div>
  <h4>background-origin:content-box</h4>
  <div class="bg-percent content-box"></div>

• CSS：

  .bg-percent {
      width: 100px; height: 75px;
      border: 20px solid rgba(0,192,255,.5);
      padding: 20px;
      background: url(./1.jpg) no-repeat;
      background-size: 100% 100%;
  }
  .content-box {
      background-origin: content-box;
  }