div中孔的定义-一种元素或一种方法,通过该元素或方法,您可以在<div>
元素内容后面仅显示特定区域的背景。
发布于 2010-12-04 08:39:08
更大的问题实际上不是您想要看到的元素的背景(只是background -color:透明),而是它的祖先元素。例如,如果一个带有background-color: transparent的div的包含元素是白色背景,那么它看起来仍然是白色背景。因此,最好的方法是在页面的较低级别定义背景颜色。例如,如果你想要看透div#透明,并且它是介于div#header和div#footer之间的div#content的子级,你可以给#header和#footer背景色,但将#content定义为透明。然后将背景颜色分配给#see-through的各个兄弟元素。还有一件事:在定义透明元素时,记住即使是透明元素也可以有“彩色”边框,这可能会有所帮助,这意味着您可以在不添加额外元素的情况下到达中间位置。
发布于 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);
}
因此,该块将是透明的,并且它周围的所有部分都将被其阴影高亮显示。
发布于 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>
https://stackoverflow.com/questions/4344906
复制相似问题