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

Question

Определение Отверстие в элементе - Элемент или метод, с помощью которого можно отобразить фон только для определенной области за содержимым элемента <div>.

Answer 1

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

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

Answer 2

Новый способ решить эту проблему, используя режимы наложения и поддерживая радиус границы, несколько элементов ... но без поддержки в 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>

Answer 3

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

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

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

Answer 4

Нашёл!

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

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

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

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

   Что вы думаете?

Answer 5

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

Демо

Answer 6

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

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

Answer 7

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

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 .

Answer 8

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

Answer 9

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