除了固定区域以外,整个屏幕都变暗

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (36)

我想创建一个教程,它将引导用户到哪里点击。我试图覆盖整个屏幕,<div>这会变得暗淡,所有的元素,除了一个特定区域是在一个固定的widthheighttopleft

问题是,我找不到一种方法来“取消”父母的background-color(也是透明的)。

在下面的剪辑中,hole应该是没有任何东西的div background-color,包括它的父类。

这可以完成吗?有任何想法吗?

#bg{
   background-color:gray;
   opacity:0.6;
   width:100%;
   height:100vh;
}
#hole{
   position:fixed;
   top:100px;
   left:100px;
   width:100px;
   height:100px;
}

<div id="bg">
    <div id="hole"></div>
</div>

以下是我想要实现的模型图像:

提问于
用户回答回答于

你可以用一个做,div并给它一个box-shadow

你应该考虑加入pointer-events: none

as @Prinzhorn建议增加vmax价值box-shadow

div {
  position: fixed;
  width: 200px;
  height: 200px;
  top: 50px;
  left: 50px;
  /* for IE */
  box-shadow: 0 0 0 1000px rgba(0,0,0,.3);
  /* for real browsers */
  box-shadow: 0 0 0 100vmax rgba(0,0,0,.3);
  pointer-events: none;
}

<div></div>
用户回答回答于

可以创建一个SVG,其中填充了您需要的洞。但我猜测你需要找到处理点击的方法,因为它们都将针对重叠的svg。我document.getElementFromPoint可以在这里帮助你。MDN

所属标签

可能回答问题的人

  • 不吃貓的鱼oo

    5 粉丝466 提问6 回答
  • Richel

    8 粉丝0 提问4 回答
  • 发条丶魔灵1

    6 粉丝525 提问3 回答
  • 人生的旅途

    10 粉丝484 提问3 回答

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励