jQuery 在 <div> 元素中创建一个孔
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4344906/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Creating a hole in a <div> element
提问by Sussagittikasusa
Definition of Hole in a div- An element or a method by which you can show the background, only for a particular area, behind the content of a <div>element.
div 中的孔的定义- 一种元素或一种方法，您可以通过它在<div>元素内容后面显示仅针对特定区域的背景。
采纳答案by DavidH
The larger issue is not actually the background of the element you want to see through (which would just be background-color:transparent) but instead its ancestor element(s). For instance, a div with a background-color: transparent is still going to look as if it has a white background if its containing element has a white background. The best approach then is to define the background colors at lower levels in the page. For instance, if you want to see through div#see-through and it's a child of div#content which is in between div#header and div#footer, you could give #header and #footer background colors but define #content as transparent. Then assign background colors to the individual sibling elements of #see-through. One more thing: it might be helpful to remember when defining the transparent element that even a transparent element can have "colored" borders, meaning that you might be able to reach into in-between spots without adding extra elements.
更大的问题实际上不是你想要看透的元素的背景（它只是背景颜色：透明），而是它的祖先元素。例如，一个带有 background-color: transparent 的 div 仍然看起来好像它有一个白色背景，如果它的包含元素有一个白色背景。最好的方法是在页面的较低级别定义背景颜色。例如，如果你想看透 div#see-through 并且它是 div#content 的子元素，它位于 div#header 和 div#footer 之间，你可以给 #header 和 #footer 背景颜色，但将 #content 定义为透明. 然后为#see-through 的各个兄弟元素分配背景颜色。还有一件事：
回答by equinox
Box shadow support almost all modern browsers, so, you can do what you want (I hope, I understood you right) this way:
Box shadow 支持几乎所有现代浏览器，因此，您可以通过以下方式做您想做的事情（我希望，我理解您是对的）：
html:
html：
<div class="hole"></div>
css:
css：
.hole {
position: absolute;
left: 50px;right: 50px;width: 50px;height: 50px;
box-shadow: 0 0 0 99999px rgba(0, 0, 0, .8);
}
So, the block will be transparent, and all around it will be hightlighted with its shadow.
因此，该块将是透明的，并且它周围的所有区域都将被其阴影突出显示。
Example: http://codepen.io/anon/pen/ultKh
回答by vals
A new way to solve this, using blend modes, and supporting border-radius, multiple elements... but without support in IE
一种解决此问题的新方法，使用混合模式，并支持边界半径、多个元素……但在 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>回答by Tom Gullen
You can construct a set of frame divs in the following format:
您可以按以下格式构建一组框架 div：
So, one container div, with no/little style applied to it.
因此，一个容器 div，没有/很少应用样式。
Then a set of 4 'border' divs with style applied to them, leavin the central area transparent.
然后是一组 4 个“边框”div，它们应用了样式，使中央区域保持透明。
回答by Lucian Adamson
回答by CarambaMoreno
Found it!
找到了！
- Parent div with a relative position, a transparent background and hidden overflow.
- Child div with absolute position, with colored, super big borders to fill the background of the parent, and a transparent background.
- 具有相对位置、透明背景和隐藏溢出的父 div。
- 具有绝对位置的子 div，带有彩色、超大边框来填充父div的背景，以及透明背景。
The hole will be composed of a transparent child, with borders so big they fill up the parent's background. The positioning of the child will depend of the size of the borders. Set a background to whatever is behindthe parent, and it will show through!
这个洞将由一个透明的孩子组成，边界很大，可以填满父母的背景。孩子的位置将取决于边框的大小。为父级后面的任何内容设置背景，它会显示出来！
In this example you can see the red through the yellow fauxbackground (which is actually a huge border).
在此示例中，您可以通过黄色人造背景（实际上是一个巨大的边框）看到红色。
#parent{overflow:hidden; position:relative;}
#child {position:absolute; border:9000px yellow solid; top:0; left:0;}
http://jsfiddle.net/CarambaMoreno/UrbhS/
http://jsfiddle.net/CarambaMoreno/UrbhS/
What do you think?
你怎么认为？
回答by Bazzz
You can use a png with alpha channel transparency as the background image of your div.
您可以使用具有 alpha 通道透明度的 png 作为 div 的背景图像。
<div style="background-image:url(pngwithtransparentarea.png);width:100px;height:100px;">
</div>
回答by David says reinstate Monica
There's one approach, albeit it can only do mostly rectangular borders, with the following mark-up as a demo:
有一种方法，尽管它只能做大部分矩形边框，以下标记作为演示：
html:
html：
<div id="wrap">
<div id="frame">
</div>
<img src="http://farm3.static.flickr.com/2232/2299184911_ea1091968b_z.jpg?zz=1" />
</div>
css:
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);
}
While there's no way to truly 'cut' a hole in a div, there is the possibility of using -webkit-mask-box-imageto apply masks directly to images. Albeit this only works in, so far as I'm aware, Webkit browsers (I know that it's a -webkitvendor-prefixed property, but I don't believe that there's a -mozor -oequivalent, sadly).
虽然无法真正在 a 中“切”一个洞div，但有可能使用-webkit-mask-box-image将蒙版直接应用于图像。尽管这仅适用于，据我所知，Webkit 浏览器（我知道这是一个-webkit供应商前缀的属性，但我不相信有一个-moz或-o等效的，遗憾的是）。
Demo using the above, -webkit-mask-box-imageproperty, at JS Fiddle.
回答by Breezer
After really thinking this through best thing i could come up with is if you use an iframe it could be the "lens" that views whatever you desire but ofcourse it wont work like a real lens but close to
在真正考虑过这一点之后，我能想到的最好的办法是，如果您使用 iframe，它可能是“镜头”，可以查看您想要的任何内容，但当然它不会像真正的镜头一样工作，但接近
