用CSS覆盖的孔

Question

如何在覆盖层中创建一个洞,您可以在其中看到实际的网站？

例如,在这个小提琴:http://jsfiddle.net/qaXRp/

我希望它<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

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

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

path() 使用<basic-shape>绘制任何形状应该很容易，但不幸的是，只有 Firefox 支持它clip-path，所以我们必须使用该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; }

<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>

例如，拥有圆的所有点将形成一个更大的规则，因此如果您不需要剪切指针事件，那么Ed Hinchliffe 的掩模图像解决方案可能应该是首选。

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

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; }

<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>

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

Answer 3

现在，您可以使用 css 剪裁在新的 webkit 浏览器中获得相对较好的支持（有关兼容性，请参见此处）来实现这一点。

例如，以下代码将在元素的中心（边缘略微羽化）切割一个半径为 100 像素（即 200 像素宽）的孔。

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

这是一个用于演示的代码笔。

Answer 4

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

选项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 5

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

CSS 屏蔽

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

边框/轮廓

如果您想创建相似的效果并设置它们的颜色以使其看起来相似，您还可以使用border或css 属性。outlinetransparent

绝对位置

您还可以使用位置：

<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/
- 这不是你想要的，但它可以对你有帮助:)