Javascript 有可能获得背景图像上方的div后面的颜色吗？

如果您有一个覆盖HTML页面整个主体的背景图像，并且将主体分割成几个div（像网格一样思考），那么有可能分辨出div中心点后面的颜色吗

---

在此图像中，蓝色网格表示“divs”。点代表div的中心点和我想了解的颜色。

我通过两个答案（，和）找到了解决方案

我创建了两个div：

1-使用封面图像

2-网格的容器

image div位于网格容器的前面。 单击图像时，它将保存单击点的坐标，并将图像div的z索引更改为位于后面

然后使用相同的坐标模拟单击文档（网格容器现在在前面），以获得css属性

最后，再次切换要显示在前面的图像div的z索引

请在完整窗口中运行以下代码，或在提供的窗口中查看它

var-posX，posY；
$（“#封面”）。点击（功能（e）{
//获取光标坐标
posX=e.pageX；
posY=e.pageY；
//将封面图像推到视图的背面
$（this.css（“z-index”，-1）；
//在网格容器上使用相同坐标模拟单击
document.elementFromPoint（posX，posY）.click（）；
//将封面图像切换回视图的前面
$（this.css（“z-index”，2）；
});
//获取bgColor并使用它
$（“.grid项”）。单击（函数（）{
var bgColor=$（this.css（“背景色”）；
//使用你喜欢的颜色
$（“#结果”）.css（“背景色”，bgColor）；
})

#盖，.grid容器{
宽度：100%；
身高：80%；
位置：绝对位置；
排名：0；
}
#掩护{
z指数：2；
背景图像：url（'https://www.gstatic.com/webp/gallery/4.sm.jpg');
背景大小：100%100%；
}
.网格容器{
显示：网格；
网格模板列：自动；
}
.表格项目{
填充：20px；
字体大小：40px；
文本对齐：居中；
}
#网格项-1{背景色：#00061e；}
#网格项-2{背景色：#394266；}
#网格项-3{背景色：#61a7d3；}
#网格项-4{背景色：#db2f1c；}
#网格项-5{背景色：#8b8f91；}
#网格项-6{背景色：#ce171d；}
#网格项-7{背景色：#92ed5a；}
#grid-item-8{背景色：#db25db；}
#网格项-9{背景色：#fcf00b；}
span{
位置：绝对位置；
最高：85%；
}
#结果{
宽度：50px；
高度：50px；
左：200px；
}

1.
2.
3.
4.
5.
6.
7.
8.
9
背景色结果：

据我所知，您首先需要找出每个子div的中心坐标，请参见： 之后，您需要该位置的父div背景图像的颜色，请参见：