react使用filter的drop-shadow方法修改背景图片的颜色

<span style={{ overflow: 'hidden', display: 'block', width: 16 }}>
                                                                <i style={{
                                                                    display: 'block',
                                                                    width: 16,
                                                                    height: 16,
                                                                    backgroundImage: `url(${require('images/icon_download.png')})`,
                                                                    backgroundRepeat: 'no-repeat',
                                                                    backgroundSize: 'contain',
                                                                    backgroundPosition: 'center center',
                                                                    filter: 'drop-shadow(20px 0 0 #007aff)',
                                                                    transform: 'translateX(-20px)',
                                                                    overflow: 'hidden',
                                                                }} />
                                                            </span>

原理:    filter: 'drop-shadow(20px 0 0 #007aff)' 将原来的图片生成一个需要的颜色的阴影, 阴影偏移一些位置, 原图片再往左平移直至被父元素隐藏多余的原图片, 这个显示出来的原图片的阴影就是需要的图片了