在<div>元素中创建孔
在<div>元素中创建孔
提问于 2010-12-03 19:06:18
div中孔的定义-一种元素或一种方法，通过该元素或方法，您可以在<div>元素内容后面仅显示特定区域的背景。
回答 8
Stack Overflow用户
回答已采纳
发布于 2010-12-04 08:39:08
更大的问题实际上不是您想要看到的元素的背景(只是background -color:透明)，而是它的祖先元素。例如，如果一个带有background-color: transparent的div的包含元素是白色背景，那么它看起来仍然是白色背景。因此，最好的方法是在页面的较低级别定义背景颜色。例如，如果你想要看透div#透明，并且它是介于div#header和div#footer之间的div#content的子级，你可以给#header和#footer背景色，但将#content定义为透明。然后将背景颜色分配给#see-through的各个兄弟元素。还有一件事:在定义透明元素时，记住即使是透明元素也可以有“彩色”边框，这可能会有所帮助，这意味着您可以在不添加额外元素的情况下到达中间位置。
Stack Overflow用户
发布于 2014-10-22 21:05:06
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);
}因此，该块将是透明的，并且它周围的所有部分都将被其阴影高亮显示。
Stack Overflow用户
发布于 2015-05-15 21:41:40
一种新的方法来解决这个问题，使用混合模式，并支持边界半径，多元素...但在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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/4344906
复制相关文章
相似问题