Question

如何在叠加层中创建一个可以透视实际网站的洞？

我希望<div id="center">透明，以便您可以看到<div id="underground">。是否可以仅使用CSS执行此操作，还是必须使用某些JavaScript？

Answer 1

是的，此效果是可能的。

我会使用具有非常大的展开半径的css box-shadow。

box-shadow: 0 0 0 9999px rgba(0, 0, 255, 0.2);

.hole {
  position: absolute;
  top: 20px;
  left: 20px;
  width: 200px;
  height: 150px;
  box-shadow: 0 0 0 9999px rgba(0, 0, 255, 0.2);
}

<p>Lorem ipsum dolor sit amet, ocurreret tincidunt philosophia in sea, at pro postea ullamcorper. Mea ei aeque feugiat, cum ut utinam conceptam, in pro partem veritus molestiae. Omnis efficiantur an eum, te mel quot perpetua. Ad duo autem dolore, vocent lucilius te cum, ut duo quem singulis.</p>
<p>Has ex idque repudiandae, an mei munere philosophia. Sale molestie id eos, eam ne blandit adipisci. Ei eam ipsum dissentiunt. Ei vel accusam dolores efficiantur.</p>

<div class="hole"></div>

Answer 2

这在一定程度上是可能的。

选项1：覆盖半透明边框的元素

body, html{
    height:100%;
    width:100%;
    padding:0;
    margin:0;
    background:blue;
}
#overlay{
    height:100%;
    width:100%;
    position:fixed;
    border:50px solid rgba(255,255,255,.3);
    box-sizing:border-box;
    top:0;
    left:0;
}

<div id='overlay'></div>

content content content contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent

选项2：3x3网格，中心元素完全透明

body,
html {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
  position: fixed;
  background: blue;
}
#overlay {
  display: table;
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.row {
  display: table-row;
}
.cell {
  display: table-cell;
  opacity: 0.9;
  background: grey;
}
.row:nth-child(2) .cell:nth-child(2) {
  opacity: 0;
}

<div id='overlay'>
  <div class='row'>
    <div class='cell'></div>
    <div class='cell'></div>
    <div class='cell'></div>
  </div>
  <div class='row'>
    <div class='cell'>&nbsp;</div>
    <div class='cell'>&nbsp;</div>
    <div class='cell'>&nbsp;</div>
  </div>
  <div class='row'>
    <div class='cell'></div>
    <div class='cell'></div>
    <div class='cell'></div>
  </div>
</div>

content content content contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent
contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent
contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent

Answer 3

否。这是不可能的，而不是在大多数浏览器中。

CSS屏蔽

如果您只对新浏览器感兴趣，可以使用masking：
规格：http://www.w3.org/TR/css-masking/
兼容性：http://caniuse.com/css-masks

边框/大纲

如果您想创建类似效果并将它们的颜色设置为border，那么您也可以使用outline或transparent css属性，使其看起来像个。

绝对位置

您也可以使用职位：

<div z-index:20></div>
<div z-index:10>
    <div z-index:30> // top div is over child of this one
</div>

透明度和元素

http://css-tricks.com/non-transparent-elements-inside-transparent-elements/
http://css-tricks.com/examples/NonTransparentOverTransparent/
- 这不是你要求的，但它可以帮助你:)

Answer 4

这是不可能的。但无论如何你可以做边界技巧：#overlay本身是透明的，但边界不是。请参阅小提琴：http://jsfiddle.net/qaXRp/2/

Answer 5

现在，您可以在使用css剪辑的新webkit浏览器中获得相对较好的支持（请参阅here以获得兼容性）。

例如，下面的代码会在元素的中心切出一个半径为100像素（因此宽度为200像素）的孔（边缘略微倾斜）。

-webkit-mask-image radial-gradient(100px at 50% 50% , transparent 95%, black 100%)

这是一个codepen来演示。

Answer 6

借助CSS clip-path，现在甚至可以钻取叠加层及其背景图像/背景过滤器甚至指针事件的任何内容。

为此，我们需要定义一个路径，该路径由第一个覆盖所有视口的矩形组成，然后由一个代表孔的内部形状组成。多亏了even-odd填充规则，只有我们的内部形状实际上才是剪切区域的一部分。

使用path() <basic-shape>可以很容易地绘制任何形状，但是不幸的是，只有Firefox支持clip-path，所以我们不得不使用{{1} }函数，这意味着我们必须将每个点都定义为向量。

尽管对于一个简单的方孔仍然可读：

polygon()

.hole {
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0px;
  left: 0px;
  --rect-size: 75px;
  clip-path: polygon( evenodd,
    /* outer rect */
    0 0, /* top - left */
    100% 0, /* top - right */
    100% 100%, /* bottom - right */
    0% 100%, /* bottom - left */
    0 0, /* and top - left again */
    /* do the same with inner rect */
    calc(50% - var(--rect-size) / 2) calc(50% - var(--rect-size) / 2),
    calc(50% + var(--rect-size) / 2) calc(50% - var(--rect-size) / 2),
    calc(50% + var(--rect-size) / 2) calc(50% + var(--rect-size) / 2),
    calc(50% - var(--rect-size) / 2) calc(50% + var(--rect-size) / 2),
    calc(50% - var(--rect-size) / 2) calc(50% - var(--rect-size) / 2)
  );
  /* can cut through all this */
  background-color: rgba(10, 161, 232, 0.3);
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/4/47/PNG_transparency_demonstration_1.png);
  background-size: 40px;
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  display: flex;
  justify-content: center;
}
.hole > p {
  align-self: center;
  font-size: 18px;
  font-weight: bold;
}
.hole-text {
  font-size: 100px;
}
body { color: black; }

例如，具有一个圆的所有点将形成更大的规则，因此，如果您不需要切入指针事件，那么mask-image solution by Ed Hinchliffe应该是首选。

无论如何，这是一个圆圈的JS生成器（如果需要，生成的规则仍可以硬编码在CSS文件中）。

<p>Lorem ipsum dolor sit amet, ocurreret tincidunt philosophia in sea, at pro postea ullamcorper. Mea ei aeque feugiat, cum ut utinam conceptam, in pro partem veritus molestiae. Omnis efficiantur an eum, te mel quot perpetua. Ad duo autem dolore, vocent
  lucilius te cum, ut duo quem singulis.</p>
<p>Has ex idque repudiandae, an mei munere philosophia. Sale molestie id eos, eam ne blandit adipisci. Ei eam ipsum dissentiunt. Ei vel accusam dolores efficiantur.</p>

<div class="hole">
  <p>There is an <span class="hole-text">HOLE</span> here</p>
</div>

function makeCircleHoleClipPathRule( radius ) {

  const inner_path = [];
  const circumference = Math.PI * radius;
  const step = Math.PI * 2 / circumference;
  // we are coming from top-left corner
  const start_step = circumference * (5 / 8);
  for( let i = start_step; i < circumference + start_step; i++ ) {
    const angle = step * i;
    const x = radius * Math.cos( angle );
    const y = radius * Math.sin( angle );
    const str = `calc( 50% + ${ x }px ) calc( 50% + ${ y }px )`;
    inner_path.push( str );
  }
  // avoid rounding issues
  inner_path.push( inner_path[ 0 ] );

  return `polygon( evenodd,
    /* outer rect */
    0 0,       /* top - left */
    100% 0,    /* top - right */
    100% 100%, /* bottom - right */
    0% 100%,   /* bottom - left */
    0 0,       /* and top - left again */
    ${ inner_path.join( "," ) }
   )`;

}

const hole_elem = document.querySelector( ".hole" );
// set the clip-path rule
hole_elem.style.clipPath = makeCircleHoleClipPathRule( 50 );

.hole {
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0px;
  left: 0px;
  /* clip-path is set by JS */  
  
  background-color: rgba(10, 161, 232, 0.3);
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/4/47/PNG_transparency_demonstration_1.png);
  background-size: 40px;
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  display: flex;
  justify-content: center;
}
.hole > p {
  align-self: center;
  font-size: 18px;
  font-weight: bold;
}
.hole-text {
  font-size: 100px;
}
body { color: black; }

对于其他形状，我会让读者处理;-）

用CSS覆盖的孔

6 个答案:

选项1：覆盖半透明边框的元素

选项2：3x3网格，中心元素完全透明