背景定位

背景知识：background-position (opens new window), background-origin (opens new window), calc (opens new window)

background-position方案

background-origin方案

calc方案

<style>
  .main-background{
    width: 100%;
    padding: 80px 0px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
  }
  .block {
    width: 229px; height: 139px;
    margin: auto;
    color: #f4f0ea;
    padding: 16px 29px 28px 20px;
    background: #b4a078 url('static/player_logo@2x.png') no-repeat bottom right / 78px 21px;
  }
  .block1 {
    background-position: right 29px bottom 28px;
  }
  .block2 {
    background-origin: content-box;
    margin: 29px 0; /* 移动端纵向排列上下间距 */
  }
  .block3 {
    background-position: calc(100% - 29px) calc(100% - 28px);
  }
</style>
<template>
  <div class="main-background">
    <div class="block block1">background-position方案</div>
    <div class="block block2">background-origin方案</div>
    <div class="block block3">calc方案</div>
  </div>
</template>

显示代码 复制代码 复制代码