目标效果
中间部分为高亮, 其余部分有遮罩的效果, 高亮部分根据用户操作计算出来, 是个动态变化的区间
实现
使用css background属性, 设置线性渐变色
background: linear-gradient(to right, rgba(0,0,0,0.5) 20%, rgba(0,0,0,0) 0, rgba(0,0,0,0) 76%, rgba(0,0,0,0.5) 0%)
其中20%, 76%为高亮部分的开始和结束位置
配合背景图片, 完整属性
background:
linear-gradient(to right, rgba(0,0,0,0.5) 20%, rgba(0,0,0,0) 0, rgba(0,0,0,0) 76%, rgba(0,0,0,0.5) 0%),
url("https://alieasset.meishesdk.com/editor/2021/02/24/video-thumbnail/ae1558fb-11c3-41b9-b327-17f80ad7f9bb/ae1558fb-11c3-41b9-b327-17f80ad7f9bb-0000000.jpg") 0px 0px / 118px 100% no-repeat,
url("https://alieasset.meishesdk.com/editor/2021/02/24/video-thumbnail/ae1558fb-11c3-41b9-b327-17f80ad7f9bb/ae1558fb-11c3-41b9-b327-17f80ad7f9bb-0002000.jpg") 118px 0px / 118px 100% no-repeat,
url("https://alieasset.meishesdk.com/editor/2021/02/24/video-thumbnail/ae1558fb-11c3-41b9-b327-17f80ad7f9bb/ae1558fb-11c3-41b9-b327-17f80ad7f9bb-0004000.jpg") 236px 0px / 118px 100% no-repeat,
url("https://alieasset.meishesdk.com/editor/2021/02/24/video-thumbnail/ae1558fb-11c3-41b9-b327-17f80ad7f9bb/ae1558fb-11c3-41b9-b327-17f80ad7f9bb-0006000.jpg") 354px 0px / 118px 100% no-repeat,
url("https://alieasset.meishesdk.com/editor/2021/02/24/video-thumbnail/ae1558fb-11c3-41b9-b327-17f80ad7f9bb/ae1558fb-11c3-41b9-b327-17f80ad7f9bb-0009000.jpg") 472px 0px / 118px 100% no-repeat,
url("https://alieasset.meishesdk.com/editor/2021/02/24/video-thumbnail/ae1558fb-11c3-41b9-b327-17f80ad7f9bb/ae1558fb-11c3-41b9-b327-17f80ad7f9bb-0011000.jpg") 590px 0px / 118px 100% no-repeat
