是否可以获得放置在背景图像顶部的 div 背后的颜色？答案

【问题标题】：Is it possible to get the color behind a div thats placed on top of a background image?是否可以获得放置在背景图像顶部的 div 背后的颜色？
【发布时间】：2019-07-17 18:53:41
【问题描述】：

如果您有一个覆盖整个 HTML 页面主体的背景图像，并且您将主体拆分为多个 div（像网格一样思考），是否可以分辨出中心点后面的颜色是什么？分区？

在这张图片中，蓝色网格代表“div”。圆点代表我想要了解的 div 和颜色的中心点。

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

我在 2 个答案（this 和 this）的帮助下找到了解决方案。

我创建了 2 个 div：

1 - 使用封面图片。

2 - 网格的容器。

image-div 位于网格容器的前面。当你点击图片时，它会保存点击点的坐标，并将image-div的z-index改为在后面。

而不是使用相同的坐标模拟单击文档（网格容器现在在前面），以获取 css 属性。

最后切换image-div的z-index再次显示在最前面。

请在全窗口运行以下代码或在提供的fiddle 中查看。

var posX, posY;
    $("#cover").click(function(e){
    
    //get cursor coordinates
    posX = e.pageX;
    posY = e.pageY;
    
    //push cover image to the back of the view
    $(this).css("z-index",-1);
    
    //simulate click with same coordinates on grid-container
    document.elementFromPoint(posX, posY).click();
    
    //switch cover image back to the front of the view
    $(this).css("z-index",2);
    });
    
    //get bgColor and use it
    $(".grid-item").click(function(){
    var bgColor = $(this).css("background-color");
    //use bgColor as you like
    $("#result").css("background-color",bgColor);
    })

#cover, .grid-container {
    width: 100%;
    height: 80%;
    position: absolute;
    top: 0;
    }
    #cover {
    z-index: 2;
    background-image: url('https://www.gstatic.com/webp/gallery/4.sm.jpg');
    background-size: 100% 100%;
    }

    .grid-container {
      display: grid;
      grid-template-columns: auto auto auto;
    }

    .grid-item {
      padding: 20px;
      font-size: 40px;
      text-align: center;
    }
    #grid-item-1 { background-color: #00061e; }
    #grid-item-2 { background-color: #394266; }
    #grid-item-3 { background-color: #61a7d3; }
    #grid-item-4 { background-color: #db2f1c; }
    #grid-item-5 { background-color: #8b8f91; }
    #grid-item-6 { background-color: #ce171d; }
    #grid-item-7 { background-color: #92ed5a; }
    #grid-item-8 { background-color: #db25db; }
    #grid-item-9 { background-color: #fcf00b; }
    span { 
    position:absolute;
    top:85%;
    }
    #result {
     width:50px;
     height:50px;
     left:200px;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <div>

    <div id="cover"></div>

     <div class="grid-container">
      <div class="grid-item" id="grid-item-1">1</div>
      <div class="grid-item" id="grid-item-2">2</div>
      <div class="grid-item" id="grid-item-3">3</div>
      <div class="grid-item" id="grid-item-4">4</div>
      <div class="grid-item" id="grid-item-5">5</div>
      <div class="grid-item" id="grid-item-6">6</div>
      <div class="grid-item" id="grid-item-7">7</div>
      <div class="grid-item" id="grid-item-8">8</div>
      <div class="grid-item" id="grid-item-9">9</div>
    </div> 

    </div>

    <span>background-color result:</span>
    <span id="result"></span>

【讨论】：

【解决方案2】：

据我了解，您首先需要找出每个子 div 中心的坐标，请参阅： How to find the element's x center coordinates and related window offset 之后，您需要该位置的父 div 的背景图像的颜色，请参阅： Get pixelcolor of CSS Background Image

【讨论】：