<分区>
我有这个:
我想实现这个:
我有一个大的外部 div(红色背景)和一个较小的内部 div(绿色背景)。小 div 有一个边框,我希望边框显示为透明以显示后面的背景。这可以通过 HTML/CSS 实现吗?
<分区>
我有这个:
我想实现这个:
我有一个大的外部 div(红色背景)和一个较小的内部 div(绿色背景)。小 div 有一个边框,我希望边框显示为透明以显示后面的背景。这可以通过 HTML/CSS 实现吗?
最佳答案
您可以使用伪元素实现显示背景图像的透明边框。
红色背景是伪元素的边框,透明边框由元素背景和伪元素边框之间的间隙创建:
DEMO :
body{
background:url('https://farm4.staticflickr.com/3771/13199704015_72aa535bd7.jpg');
background-size:cover;
}
.big{
margin:50px;
padding:50px;
min-height:500px;
overflow:hidden;
}
.big p{
position:relative;
z-index:1;
}
.small{
position:relative;
background:teal;
width:150px;height:150px;
margin:25px;
z-index:0;
}
.small:before{
content:'';
position:absolute;
top:-5025px; left:-5025px;
width:200px; height:200px;
border:5000px solid rgba(255,255,255,0.8);
background:none;
}
<div class="big">
<p>content here</p>
<div class="small"></div>
<p>content here</p>
</div>
输出:
您还可以使用 box-shadow 而不是 border,这样您就不必为伪元素的 top/left
定位使用负值。浏览器支持 isn't as good作为边框:
body{
background:url('https://farm4.staticflickr.com/3771/13199704015_72aa535bd7.jpg');
background-size:cover;
}
.big{
margin:50px;
padding:50px;
min-height:500px;
overflow:hidden;
}
.big p{
position:relative;
z-index:1;
}
.small{
position:relative;
background:teal;
width:150px;height:150px;
margin:25px;
z-index:0;
}
.small:before{
content:'';
position:absolute;
top:-25px; left:-25px;
width:200px; height:200px;
box-shadow: 0px 0px 0px 5000px rgba(255,255,255,0.8);
background:none;
}
<div class="big">
<p>content here</p>
<div class="small"></div>
<p>content here</p>
</div>
关于css - 显示背景图像的透明边框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27485098/
相关文章:
java - 是否可以仅在顶部有一个 java swing 边框?
css - 浏览器如何决定使用什么 : http or https (tinymce load of @font-face error)
css - 任何人都知道为什么我的 Chrome 浏览器的背景颜色会这样吗?
html - 如何在 CSS 中创建点划线和点划线点线和矩形
.net - 如何使用 VB.net 删除 Excel 范围内单元格的边框?
iphone - iOS 中的 quartz mask ——它们还会导致崩溃吗?
python - opencv/ python : mask in module cv2 while streaming webcam video