Создание дыры в элементе <div>

Ответ 1

Большая проблема на самом деле не является фоном элемента, который вы хотите просмотреть (который будет просто цвет фона: прозрачный), а вместо этого его (-ы) предка. Например, div с фоном-цветом: прозрачный по-прежнему будет выглядеть так, как если бы он имел белый фон, если его содержащий элемент имеет белый фон. Лучшим подходом тогда является определение цветов фона на более низких уровнях страницы. Например, если вы хотите видеть через div # view-through и это дочерний элемент div #, который находится между заголовком div # и нижним колонтитулом div #, вы можете указать цвета фона #header и #footer, но определить #content как прозрачный, Затем назначьте цвета фона отдельным элементам sibling из # сквозного просмотра. Еще одна вещь: при определении прозрачного элемента может быть полезно запомнить, что даже прозрачный элемент может иметь "цветные" границы, что означает, что вы могли бы достигнуть промежуточных точек без добавления дополнительных элементов.

Ответ 2

Коробчатая тень поддерживает почти все современные браузеры, поэтому вы можете делать то, что хотите (я надеюсь, я понял вас правильно) следующим образом:

HTML:

<div class="hole"></div>

CSS

.hole {
    position: absolute;
    left: 50px;right: 50px;width: 50px;height: 50px;
    box-shadow: 0 0 0 99999px rgba(0, 0, 0, .8);
}

Итак, блок будет прозрачным, и вокруг него будет освещен тень.

Пример: http://codepen.io/anon/pen/ultKh

Ответ 3

Вы можете создать набор разделов фрейма в следующем формате:

Итак, один контейнер div, с которым не применяется стиль/маленький.

Затем набор из 4 'пограничных' разделов со стилем, применяемым к ним, выдает прозрачную центральную область.

Ответ 4

Новый способ решить эту проблему, используя режимы наложения, и поддерживать граничный радиус, несколько элементов... но без поддержки в IE

.back {
	background-color: lightblue;
	width: 400px;
	height: 300px;
	background-image: repeating-linear-gradient(45deg, white 0px,lightblue 40px);
}

.base {
	position: relative;
	left: 10px;
	top: 10px;
	width: 200px;
	height: 200px;
	border: solid 1px black;
	background-color: white;
	mix-blend-mode: hard-light;
}

.hole {
	width: 80px;
	height: 50px;
	margin: 10px;
	border: solid 1px red;	
	border-radius: 10px;
	background-color: gray;
}

<div class="back">
	<div class="base">
		<div class="hole">ONE</div>
		<div class="hole">TWO</div>
	</div>
</div>

Ответ 5

Вы можете использовать png с прозрачностью альфа-канала в качестве фонового изображения вашего div.

<div style="background-image:url(pngwithtransparentarea.png);width:100px;height:100px;">
</div>

Ответ 6

Я разработал что-то на ручке кода, которую я думаю, что вы/искали. Я искал то же самое... не мог найти ничего, поэтому это то, что я сделал

Демо

Ответ 7

Нашел его!

• Родительский div с относительным положением, прозрачным фоном и скрытое переполнение.
• Детский div с абсолютным положением, с цветными, супер большие границы, чтобы заполнить фон родительского, и прозрачный фон.

Отверстие будет состоять из прозрачного ребенка, с такими большими границами они заполняют родительский фон. Позиционирование ребенка будет зависеть от размера границ. Установите фон для <родителя > позади, и он будет отображаться через!

В этом примере вы можете видеть красный цвет через желтый фон faux (который на самом деле является огромной границей).

#parent{overflow:hidden; position:relative;}
#child {position:absolute; border:9000px yellow solid; top:0; left:0;}

http://jsfiddle.net/CarambaMoreno/UrbhS/

Как вы думаете?

Ответ 8

Есть один подход, хотя он может делать только в основном прямоугольные границы со следующей надписью в виде демонстрации:

HTML:

<div id="wrap">
    <div id="frame">
    </div>
    <img src="http://farm3.static.flickr.com/2232/2299184911_ea1091968b_z.jpg?zz=1" />
</div>

CSS:

#wrap {
    overflow: hidden;
    position: relative;
}

#frame {
    border: 60px solid #000;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(255,255,255,0.5);
}

Демо в JS Fiddle.

Пока нет возможности "разрезать" отверстие в div, существует возможность использовать -webkit-mask-box-image для применения маскирует непосредственно изображения. Хотя это только работает, насколько мне известно, браузеров Webkit (я знаю, что это свойство -webkit, но я не верю, что эквивалент -moz или -o, к сожалению).

Демо, используя выше, свойство -webkit-mask-box-image, в JS Fiddle.

Ответ 9

После того, как я подумал об этом с помощью лучшей вещи, я мог бы придумать, если вы используете iframe это может быть "линза", которая рассматривает все, что вы хотите, но, конечно, это не будет работать как настоящий объектив, но близко к