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

35次阅读

共计 526 个字符，预计需要花费 2 分钟才能阅读完成。

应用多个 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, 来计算出地位百分比等  计算比较复杂.


` `

正文完