Отверстие в наложении с помощью CSS

Как можно создать отверстие в оверлее, где вы можете увидеть фактический веб-сайт?

Например, в этой скрипте: http://jsfiddle.net/qaXRp/

Я хочу, чтобы <div id="center"> был прозрачным, чтобы вы могли видеть <div id="underground">. Можно ли сделать это только с помощью CSS или мне нужно использовать какой-то JavaScript?

Ответ 1

Нет. Это невозможно, но не в большинстве браузеров.

Маскировка CSS

Вы можете использовать masking, если вас интересуют только новые браузеры:
Спецификации: http://www.w3.org/TR/css-masking/
Совместимость: http://caniuse.com/css-masks

Граница/Контур

Вы также можете использовать свойства border или outline css, если вы хотите создать имитационный эффект и установить цвет их на transparent, чтобы он выглядел симулятором.

Абсолютная позиция

Вы также можете использовать положение:

<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/
- это не то, о чем вы просите, но это может вам помочь.

Ответ 2

Да, этот эффект возможен.

Я бы использовал тэг css box с очень большим радиусом распространения.

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>

Ответ 3

Это возможно, в некоторой степени.

Вариант 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

Ответ 4

Это невозможно. Но в любом случае вы можете сделать трюк с границей: сам #overlay прозрачен, но границ нет. Смотрите скрипту: http://jsfiddle.net/qaXRp/2/

Ответ 5

Теперь вы можете добиться этого с относительно хорошей поддержкой в новых браузерах webkit, используя css clipping (см. здесь для совместимости).

Например, следующий код разрезал отверстие с радиусом 100 пикселей (так 200px в ширину) в центре вашего элемента (со слегка пернатым краем).

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

Здесь codepen, чтобы продемонстрировать.