使用多个div拼完整的背景图

使用多个div拼完整的背景图

需求,根据时长来展示音频图,根据音频时长来展示相应的帧图.(不需要裁剪背景图.一张图片根据css3属性来展示)

直接放代码:

<div
  class="backgroundImg"
  v-show="!item1.is_noisereduc"
  :style="{
    background:
      'url(' + item1.frame_img_url + ') no-repeat ',
    'background-position-x':
      (
        item1.self_start_time /
        (item1.alltime -
          item1.self_end_time +
          item1.self_start_time)
      ).toFixed(2) *
        100 +
      '%',
    'background-position-y': '0%',
    'background-size':
      (item1.alltime /
        (item1.self_end_time - item1.self_start_time)) *
        100 +
      '% 50px', //200 -50
    'background-position-y': '100%'
  }"
>
</div>`


主要使用background-position-x,来计算出位置百分比等  计算比较复杂.


` `