显示背景图象的透明边界

问题描述

我有这个：

我想实现这一点：

我有一个大的外部div（红色背景） - 优雅div（绿色背景）。小div有一个边框，我想让边框显示为透明，以显示背后的背景。

解决方案

您可以使用HTML / CSS实现透明边框显示背景图片伪元素。

红色背景是伪元素的边框，透明边框是由元素背景和伪元素边框之间的间隙创建的：

您也可以使用box-阴影而不是边界，因此您不必对伪元素的 top / left 定位使用负值。浏览器支持好，

  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 = > < p>内容在这里< / p> < div class =small>< / div> < p> content here< / p>< / div>  

I have this:

I want to achieve this:

I have a big outer div (with red background) and a smaller-inner div (with green background). The small div has a border, I want the border to appear as transparent to show the behind background. Is this achievable with HTML/CSS?

解决方案

You can achieve the transparent border showing background image using a pseudo element.

The red background is the border of the pseudo element and the transparent border is created by the gap between the element's background and the pseudo element's border:

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>

output:

You can also use box-shadow instead of border so you don't have to use negative values for the top/left positioning of the pseudo element. Browser support isn't as good as border though :

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>

这篇关于显示背景图象的透明边界的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！