1

我正在做一个项目，我希望能够将 div 覆盖在整个页面的顶部，但背景颜色应该通过 jquery 选择器避开屏幕区域。

知道如何用谷歌搜索它是一件棘手的事情，不幸的是，在做我想做的事或做我想做的事的图书馆方面没有任何成功。

下面是一个屏幕截图，显示了我正在尝试做的事情。

示例截图

例如，我正在考虑执行以下操作：

这个想法是提供一种演示/教程，以便它可以突出某些区域并提供一些附近的文本来解释功能或设置等。

例如，我可能有如下内容：

demoLib.show("#btnHighlightMyButton", "Show this text near by");

希望我已经解释了我正在尝试做的事情，这是有道理的，但如果不是这样的话。

所以基本上，问题是如何设置背景渐变但背景避开选择器的区域，如屏幕截图所示

4

2 回答 2

2

我建议使用z-index.

例子：

focus("#button2");

function focus(elem){

  $(elem).css({"z-index":"100"});
  
  $(elem).click(function(){
    console.log($(this).attr("id"))
  })

  let buttonW = $(elem).css("width");
  let buttonH = $(elem).css("height");

  let offset = $(elem).offset();

  let buttonpos = [offset["top"],offset["left"]];

  $('.overlay #focusspot').css(
    {
      "width":parseInt(buttonW)+30+"px",
      //+30 will act like a padding!
      "height":parseInt(buttonH)+30+"px",
      "border-radius":"50%",
      "background":"white",
      "position":"absolute",
      "top":`${buttonpos[0]-15}px`,
      //-15 is half the 30px we added above (to center perfectly)!
      "left":`${buttonpos[1]-15}px`
    }
   );
  
}
body{
  width:100%;
  height:100%;
}
div.container{
  width:100%;
  height:200px;
  position:relative;
  display:flex;
  justify-content:center;
  align-items:center;
}
button{
  margin: 0px 10px;
  cursor:pointer;
}
div.overlay{
  position:absolute;
  width:100%;
  height:100%;
  background-color:rgba(33, 150, 243, 0.54);
  top:0px;
  left:0px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="container">

  <button id="button1">Button one</button>
  <button id="button2">Button two</button>
  <button id="button3">Button three</button>

</div>

<div class="overlay">
  <div id="focusspot"></div>
</div>

我希望这会有所帮助。

于 2019-09-16T18:23:29.983 回答
0

也许在 css 中使用 z-index 使图像覆盖整个页面，然后使用 rgba 使其透明，可能使您的图像达到 75% - 用于阴影覆盖效果。

至于白色的开口，可能要检查坐标。

画布也是您可能使用的一种技术。

祝你好运

于 2019-09-16T17:59:40.437 回答