Question

我想创建一个教程，引导用户准确点击的位置。我尝试使用<div>覆盖整个屏幕，这将隐藏除特定区域之外的所有元素，这些区域位于固定width，height ，top和left。

问题是，我找不到取消＆＃34;取消＆＃34;父母background-color（也是透明的）。

在下面的剪辑中，hole是应该没有任何background-color的div，包括其父级。

这可以完成吗？有什么想法吗？

＆＃13;

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

＆＃13;

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

＆＃13;

这是我想要实现的模拟图像：

Answer 1

您只需使用一个div即可，并为其提供box-shadow。

修改正如@Nick Shvelidze指出的那样，你应该考虑添加pointer-events: none

为vmax添加box-shadow值@Prinzhorn建议

＆＃13;
＆＃13;
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; }
＆＃13;
<div></div>
＆＃13;
＆＃13;
＆＃13;

Answer 2

您可以创建一个SVG，其中填充的路径包含您需要的孔。但我想你需要找到一种处理点击的方法，因为所有这些都将针对重叠的svg。我document.getElementFromPoint可以帮到你。 mdn

Answer 3

这也可以与@ VilleKoo的答案类似，但有边框。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="@dimen/nav_header_height"
    android:gravity="bottom"
    android:orientation="vertical"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:theme="@style/ThemeOverlay.AppCompat.Dark"
    android:background="@drawable/drawer_menu_header_background">

    <TextView
        android:id="@+id/drawer_header_username"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingTop="@dimen/nav_header_vertical_spacing"
        android:text="Android Studio"
        android:textColor="@android:color/black"
        android:textAppearance="@style/TextAppearance.AppCompat.Body1"/>

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="@android:color/black"
        android:text="android.studio@android.com"/>

</LinearLayout>

div {
    border-style: solid;
    border-color: rgba(0,0,0,.3);
    pointer-events: none;
    position: absolute;
    top: 0; bottom: 0; left: 0; right: 0;
    border-width: 40px 300px 50px 60px;
}

Answer 4

您可以使用CSS VilleKoo's answer属性与outline中的相同。它具有出色的浏览器支持（并且也适用于IE8 +）。轮廓与边框具有相同的语法，但与边框不同，它们不占用空间，它们被绘制在内容之上。

同样对于IE9 +，您可以将99999px替换为calc(100 * (1vh + 1vw - 1vmin))。

这种方法的缺点是outline不受border-radius的影响。

演示：

div {
  position: fixed;
  width: 200px;
  height: 200px;
  top: 50px;
  left: 50px;
  /* IE8 */
  outline: 99999px solid rgba(0,0,0,.3);
  /* IE9+ */
  outline: calc(100 * (1vw + 1vh - 1vmin)) solid rgba(0,0,0,.3);
  /* for other browsers */
  outline: 100vmax solid rgba(0,0,0,.3);
  pointer-events: none;
}

<div></div>

Answer 5

这是使用@VilleKoo css的简单jQuery代码

var Dimmer = (function(){
  var el = $(".dimmer");
  
  return {
    showAt: function(x, y) {
      el
        .css({
          left: x,
          top: y,
        })
        .removeClass("hidden");
    },
    
    hide: function() {
      el.addClass("hidden");
    }
  }
}());


$(".btn-hide").click(function(){ Dimmer.hide(); });
$(".btn-show").click(function(){ Dimmer.showAt(50, 50); });

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

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>

  <div>
    <input type="text">
    <select name="" id=""></select>
    <input type="checkbox">
  </div>
  <div>
    <input type="text">
    <select name="" id=""></select>
    <input type="checkbox">
  </div>
  <div>
    <input type="text">
    <select name="" id=""></select>
    <input type="checkbox">
  </div>
  <div>
    <input type="submit" disabled>
  </div>
  
  <input type="button" value="Hide" class="btn-hide">
  <input type="button" value="Show" class="btn-show">
  <div class="dimmer hidden"></div>
  <script src="https://code.jquery.com/jquery-2.2.4.js"></script>
</body>
</html>

Answer 6

#bg {
   background-color: gray;
   opacity: 0.6;
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: 99998;
}
#hole {
   position: fixed;
   top: 100px;
   left: 100px;
   width: 100px;
   height: 100px;
   z-index: 99999;
}

除固定区域外，整个屏幕都变暗？

6 个答案: