javascript - 是否有可能获得放置在背景图像顶部的 div 后面的颜色？

Question

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

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

Answer 1

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

我创建了 2 个 div:

1 - 使用封面图片。

2 - 网格容器。

image-div 位于 grid-container 的前面。 当您点击图片时，它会保存点击点的坐标，并将 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>