为div设置四个角的背景图片

csx

1. 效果图如下


2. 准备四张png背景图片


3. 页面结构和css

[HTML] 纯文本查看 复制代码

<!-- 常住人口统计 -->
<template>
  <div class="content">
    <div class="main-box">
      <div class="main">
      	....省略
      </div>
    </div>
  </div>
</template>


<style lang='scss' scoped>
.content {
  .main-box {
    height: 434px;
    width: 100%;
    background-image: url("../../assets/bg_images/HFY-Angle-1.png"),
      url("../../assets/bg_images/HFY-Angle-2.png"),
      url("../../assets/bg_images/HFY-Angle-4.png"),
      url("../../assets/bg_images/HFY-Angle-3.png");
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
    background-position: top left, top right, bottom left, bottom right;
    z-index: 1;
    padding: 2px 2px 3px 2px; //设置padding给div往里挤
  }
  .main {
    height: 100%;
    width: 100%;
    border: 2px solid #1723b0;
  }
}
</style>