Question

如果您的背景图片覆盖了HTML页面的整个正文，并且您将正文分成了多个div（像网格一样思考），则可以判断出其中心点后面的颜色是什么div？

在此图像中，蓝色网格表示'divs'。点代表我要查找的div和颜色的中心点。

Answer 1

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

我创建了2个div：

1-使用封面图像。

2-网格的容器。

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

比拟使用相同坐标模拟对文档（网格容器位于前面）的单击，以获得css属性。

最终切换image-div的z索引以再次显示在前面。

请在全窗口中运行以下代码，或在提供的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>

Answer 2

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

是否有可能在背景图片上方的div后面获得颜色？

2 个答案: