使用flex布局来实现异形背景适配大小写法

css yekong 94℃

之前我们遇到异形背景并且需要适配大小的时候使用过类似九宫格的思路,js 九宫格图片背景大小及定位生成,但是在一些复杂的情况比如类似下图,使用九宫格的方式也不是很方便,今天换一种思路使用flex的方式来实现。

使用flex布局来实现异形背景大小设置

实现代码

/**
* @Author: 858834013@qq.com
* @Name: gridView
* @Date: 2023年12月10日16:16:25
* @Desc: 仿安卓.9图九宫格效果
*/
<template>
  <div class="gridView">
<!--    顶部-->
    <div class="gridViewTop">
      <div class="gTop1"></div>
      <div class="gTop2"></div>
      <div class="gTop3"></div>
      <div class="gTop4"></div>
      <div class="gTop5"></div>
    </div>
<!--    上部-->
    <div class="gridViewTop2">
      <div class="gridViewTop2_01"></div>
      <div class="gridViewTop2_02"></div>
      <div class="gridViewTop2_03"></div>
    </div>
<!--    中间-->
    <div class="gridViewTop3">
      <div class="gridViewTop3_01"></div>
      <div class="gridViewTop3_02"></div>
      <div class="gridViewTop3_03"></div>
    </div>
<!--    下部-->
    <div class="gridViewTop4">
      <div class="gridViewTop4_01"></div>
      <div class="gridViewTop4_02"></div>
      <div class="gridViewTop4_03"></div>
    </div>
<!--    底部-->
    <div class="gridViewBottom">
      <div class="gridViewBottom1"></div>
      <div class="gridViewBottom2"></div>
      <div class="gridViewBottom3"></div>
    </div>
  </div>
</template>

<script>

export default {
  name: "gridView"
}
</script>

<style lang="scss" scoped>
.gridView {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  min-height: 80px;
  min-width: 250px;
  bottom: 0;
  right: 0;
  z-index: -1;
  pointer-events: none; //避免div层被点击
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
  flex-direction: column;
  align-content: flex-start;
  //顶部
  .gridViewTop {
    width: 100%;
    height: 40PX;
    flex-shrink: 0;
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: row;
    align-content: flex-start;

    .gTop1 {
      background: url("./assets/bg/01.png") no-repeat;
      background-size: 100% 100%;
      width: 80PX;
      height: 40PX;
      flex-shrink: 0;
    }

    .gTop2 {
      background: url("./assets/bg/02.png") no-repeat;
      background-size: 100% 100%;
      width: 50%;
      height: 40PX;
    }

    .gTop3 {
      background: url("./assets/bg/03.png") no-repeat;
      background-size: 100% 100%;
      width: 171PX;
      height: 40PX;
      flex-shrink: 0;
    }

    .gTop4 {
      background: url("./assets/bg/04.png") no-repeat;
      background-size: 100% 100%;
      width: 50%;
      height: 40PX;
    }

    .gTop5 {
      background: url("./assets/bg/05.png") no-repeat;
      background-size: 100% 100%;
      width: 21PX;
      height: 40PX;
      flex-shrink: 0;
    }
  }

  //中间

  .gridViewTop1 {
    width: 100%;
    height: 40PX;
    flex-shrink: 0;
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: row;
    align-content: flex-start;

    .gTop1 {
      background: url("./assets/bg/01.png") no-repeat;
      background-size: 100% 100%;
      width: 80PX;
      height: 40PX;
      flex-shrink: 0;
    }

    .gTop2 {
      background: url("./assets/bg/02.png") no-repeat;
      background-size: 100% 100%;
      width: 50%;
      height: 40PX;
    }

    .gTop3 {
      background: url("./assets/bg/03.png") no-repeat;
      background-size: 100% 100%;
      width: 171PX;
      height: 40PX;
      flex-shrink: 0;
    }

    .gTop4 {
      background: url("./assets/bg/04.png") no-repeat;
      background-size: 100% 100%;
      width: 50%;
      height: 40PX;
    }

    .gTop5 {
      background: url("./assets/bg/05.png") no-repeat;
      background-size: 100% 100%;
      width: 21PX;
      height: 40PX;
      flex-shrink: 0;
    }
  }

  .gridViewTop2 {
    width: 100%;
    height: 50%;
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: row;
    align-content: flex-start;

    .gridViewTop2_01 {
      background: url("./assets/bg/06.png") no-repeat;
      background-size: 100% 100%;
      width: 45PX;
      height: 100%;
      flex-shrink: 0;
    }

    .gridViewTop2_02 {
      background: url("./assets/bg/07.png") no-repeat;
      background-size: 100% 100%;
      width: 100%;
      height: 100%;
    }

    .gridViewTop2_03 {
      background: url("./assets/bg/08.png") no-repeat;
      background-size: 100% 100%;
      width: 40PX;
      height: 100%;
      flex-shrink: 0;
    }
  }

  .gridViewTop4 {
    width: 100%;
    height: 50%;
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: row;
    align-content: flex-start;

    .gridViewTop4_01 {
      background: url("./assets/bg/12.png") no-repeat;
      background-size: 100% 100%;
      width: 45PX;
      height: 100%;
      flex-shrink: 0;
    }

    .gridViewTop4_02 {
      background: url("./assets/bg/07.png") no-repeat;
      background-size: 100% 100%;
      width: 100%;
      height: 100%;
    }

    .gridViewTop4_03 {
      background: url("./assets/bg/08.png") no-repeat;
      background-size: 100% 100%;
      width: 40PX;
      height: 100%;
      flex-shrink: 0;
    }
  }

  .gridViewTop3 {
    width: 100%;
    height: 83PX;
    flex-shrink: 0;
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: row;
    align-content: flex-start;

    .gridViewTop3_01 {
      background: url("./assets/bg/09.png") no-repeat;
      background-size: 100% 100%;
      width: 45PX;
      height: 83PX;
      flex-shrink: 0;
    }

    .gridViewTop3_02 {
      background: url("./assets/bg/10.png") no-repeat;
      background-size: 100% 100%;
      width: 100%;
      height: 83PX;
    }

    .gridViewTop3_03 {
      background: url("./assets/bg/11.png") no-repeat;
      background-size: 100% 100%;
      width: 40PX;
      height: 83PX;
      flex-shrink: 0;
    }
  }

  //底部
  .gridViewBottom {
    width: 100%;
    height: 32PX;
    flex-shrink: 0;
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: row;
    align-content: flex-start;

    .gridViewBottom1 {
      background: url("./assets/bg/13.png") no-repeat;
      background-size: 100% 100%;
      width: 28PX;
      height: 100%;
      flex-shrink: 0;
    }

    .gridViewBottom2 {
      background: url("./assets/bg/14.png") no-repeat;
      background-size: 100% 100%;
      width: 100%;
      height: 100%;
    }

    .gridViewBottom3 {
      background: url("./assets/bg/15.png") no-repeat;
      background-size: 100% 100%;
      width: 21PX;
      height: 100%;
      flex-shrink: 0;
    }
  }
}

</style>

喜欢 (0)