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