Question

我有一个网站，其中颜色与不同的用户相关联。

例如，用户在他们的个人资料图片周围有一个边框，它使用他们定义的颜色。

用户颜色也可以放置在背景图像的一部分之上，并且当以这种方式使用时，颜色被设置为具有透明度，因此可以通过颜色查看图像。

以下是该问题的一个示例示例https://jsfiddle.net/hgoc6rmL/

当覆盖在背景上时，由于背景中的颜色，颜色不再与用户颜色匹配。当在网站上使用它时，它实际上在SVG中，后面是一个canvas元素。

我的SVG通过

着色

<linearGradient id="solids">
   <stop offset="0%" style="stop-color: rgb(255, 80, 15);"></stop>
   <stop offset="1.6988004382071917%" style="stop-color: rgb(255, 80, 15);"></stop>
   <stop offset="1.6988004382071917%" style="stop-color: rgb(10, 10, 255);"></stop>
   <stop offset="1.6988004382071917%" style="stop-color: rgb(10, 10, 255);"></stop>
   <stop offset="19.97443202796756%" style="stop-color: rgb(10, 10, 255);"></stop>
   <stop offset="19.97443202796756%" style="stop-color: rgba(255, 255, 255, 0.8);"></stop>
   <stop offset="100%" style="stop-color: rgba(255, 255, 255, 0.8);"></stop>
</linearGradient>

有没有办法用HTML，CSS或在SVG中修复叠加层的色彩平衡，使其与用户颜色紧密匹配？

调整元素具有不透明度的颜色

0 个答案: