javascript - 将背景设置为完全黑色，除了不透明度为 0% 的圆圈？

Question

我正在构建一个网页，我的目标是老一代。我们对该年龄组的易用性测试表明，他们对基于菜单的网站导航感到困惑；一些测试人员甚至不知道站点菜单是什么。

我们发现向他们展示菜单可以让他们中的大部分人了解如何浏览网站，因此我们最简单的解决方案(除非重新组织整个网站)是在用户首次访问的网页上放置一个叠加层.

我的设计理念是设置 75% 的不透明度背景，但菜单按钮周围的圆圈为 0%，然后在顶部放置一张图片，上面有一个巨大的箭头和文字，上面写着“点击这里浏览我们的网站”站点”或类似的东西。然后是继续按钮。

我遇到的问题是我不知道如何只在一个地方将背景不透明度设置为 0%，而且我不知道如何在简单的搜索中用词来表达它以查看 Google 是否可以找到解决方案.

如果有办法用 CSS 做到这一点，请告诉我。

Answer 1

您可以使用带有 hudge 阴影的伪对象来绘制其父项的背景，但可以通过它查看并将其放置在要查看的元素/部分的顶部。

.seeme {float:right;margin:0 5em;}
.howto {
  position:fixed;
  z-index:1;
  top:0;
  left:0;
  bottom:0;
  right:0;
  display:flex;
  align-items:center;
  justify-content:center;
}
.howto:before {
  content:'';
  position:absolute;
  z-index:-1;
  height:120px;
  width:120px;
  box-shadow:0 0 1em white, 0 0 0 1000vw rgba(50,75,125,0.95);
  right:5em;
  top:10px;
  border-radius:100%;
  border:solid red;
}
.howto article {
  margin:auto;
  padding:0 250px;
  width:100%;
}

<img class="seeme" src="http://dummyimage.com/100&text=see_me" />

<h1>HTML Ipsum Presents</h1>
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em>  Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis
  tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>

<h2>Header Level 2</h2>

<ol>
  <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
  <li>Aliquam tincidunt mauris eu risus.</li>
</ol>

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis
    elit sit amet quam. Vivamus pretium ornare est.</p>
</blockquote>

<h3>Header Level 3</h3>

<ul>
  <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
  <li>Aliquam tincidunt mauris eu risus.</li>
</ul>

<pre><code>
#header h1 a {
  display: block;
  width: 300px;
  height: 80px;
}
</code></pre>
<div class="howto">
  <article><h1>Howto</h1>

  <p><strong>Pellentesque habitant more blabla</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em>    Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci,
    sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>

  <h2>Header Level 2</h2>

  <ol>
    <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
    <li>Aliquam tincidunt mauris eu risus.</li>
  </ol>

  <blockquote>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis
      elit sit amet quam. Vivamus pretium ornare est.</p>
  </blockquote>
</article>
</div>

否则，在您的“howto navigate”消息中插入一个 png 图像就可以了:)您的 howto 可以是存储在站点旁边的 html 页面，可以从脚本中调用，也可以从用户从菜单链接调用到类似灯箱的框架中.