Svg 对角线设计(背景img)覆盖和过渡解决方案

Svg 对角线设计(背景img)覆盖和过渡解决方案,svg,background-image,overlay,transition,diagonal,Svg,Background Image,Overlay,Transition,Diagonal,当我试图将我的技能提升到一个新的水平时,我一直在思考解决这个问题的最佳方法,但还没有找到一个选择。对于我们的客户,我们经常使用涉及对角线图像的设计作为从一个内容字段到另一个内容字段的过渡或覆盖。 我的意思是像这样的东西 我们通常要做的是导出整个图像(对于选项一),并将其用作背景图像,这对性能产生了非常负面的影响。 由于我不想使用巨大的图像,但仍然希望保持图像干净(不是像素化),我想问的是,有什么样的解决方案可以使img尺寸保持较小,以满足加载的需要,并提供一种简单的方法来调整它,以适应快速响

当我试图将我的技能提升到一个新的水平时,我一直在思考解决这个问题的最佳方法,但还没有找到一个选择。对于我们的客户,我们经常使用涉及对角线图像的设计作为从一个内容字段到另一个内容字段的过渡或覆盖。 我的意思是像这样的东西

我们通常要做的是导出整个图像(对于选项一),并将其用作背景图像,这对性能产生了非常负面的影响。 由于我不想使用巨大的图像,但仍然希望保持图像干净(不是像素化),我想问的是,有什么样的解决方案可以使img尺寸保持较小,以满足加载的需要,并提供一种简单的方法来调整它,以适应快速响应的设计

我感谢你的建议和帮助