【CSS】点九图的使用：利用背景拉伸显示比例柱

作者: Ringo_ | 来源:发表于2022-07-15 18:35 被阅读0次

【CSS】点九图的使用：利用背景拉伸显示比例柱
雪碧图的简单制作
2018-08-15day-24
Android 点九图机制讲解及在聊天气泡中的应用
Core Animation：拉伸过滤和组透明
CSS-背景5-多张背景图
Android 点九图片制作步骤
vue cli 打包后图片路径
【CSS】斜拼砖块背景
css sprite

父元素作为整个柱体，子元素作为实体用来显示比例：

<div class="bar">
  <div class="solid_bar"></div>
</div>

父元素样式，设置空柱子的背景：

      width: 80px;
      height: 94px;
      background-image: url(./assets/bg.png);
      background-repeat: no-repeat;
      background-size: 100% 100%;
      position: relative;

子元素样式：使用border-image-slice属性将子元素的实体柱背景图切割为9份，需要将整个上方和下方进行拉伸，中间使用fill填充

      width: 50px;
      position: absolute;
      left: calc((100% - 50px) / 2);
      bottom: 12px;
      max-height: 78px;
      box-sizing: border-box;
      border: 0px solid #000;
      border-image-source: url(./assets/bar.png);
      border-image-slice: 20 0 20 0 fill;
      border-image-width: 20px 1px 20px 1px;

lQLPJxZy6aeAtxnMkc0BALA5fqkVOwAQDAK9Vtw9AIkA_256_145.png

给子元素设置动态高度：

<div class="solid_bar" :style="{ height: bar_height }"></div>

bar_height的大小自己计算得到：

  const full_height = 78;
  // 模拟外部传入的比例
  const proportion = 0.5;
  const bar_height = ref("0");
  bar_height.value = proportion * full_height + "px";

lQLPJxZy6h9O34DMk80CdrBEgPyey4trVAK9V6ATQJYA_630_147.png