javascript - 我可以使用 JavaScript 对特定像素的颜色进行采样吗？

Question

我目前正在开展一个项目，该项目可能会同时包含大量图像。所以我们的设计在图像底部放了一个小标题，作为覆盖，一个小::After“箭头”指向下一部分。

叠加层大约有 10% 的透明，因此某些图像只是可见的，但根据图像，叠加层的颜色会有所不同 - 导致箭头不匹配。

请以这张图片为例：

有什么方法可以以编程方式对“箭头”附近的一个或平均像素进行采样，以便它始终获得正确的颜色，并且看起来无缝？

编辑：

.overlay-with-arrow
{
    position: absolute;
    bottom: 0;
    width: 100%;
    background-color: rgba(62, 62, 62, 0.9);
    color: #FFF;
    text-align: center;
    font-family: Montserrat, SansSerif, serif;
    text-transform: uppercase;
}

.overlay-with-arrow::after
{
    content: "";
    width: 0;
    height: 0;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-top: 20px solid rgb(62, 62, 62);
    display: block;
    position: absolute;
    transform: translateX(-50%);
    left: 50%;
    bottom: -20px;
    z-index: 1;
}

标签： javascripthtmlcss