html设置元素覆盖元素,HTML – 如何用元素覆盖边框？

In this example,div的边缘顶部有一个数字.为了说清楚,我希望用数字覆盖哪个边界部分,我也给了这个数字的边界.当然,我们可以给出数字的背景颜色,但是身体的背景图像被隐藏了.我们怎样才能隐藏数字透明度的边界？

HTML：

1

Register

Lorem ipsum dolor sit amer, consetetur sed iam nonumy eirmod tempor invidunt ut labore et dolore magna aliquayam erat, sed diam vo

CSS：

body{

background: blue;

padding-top: 30px;

background-image: url('https://pbs.twimg.com/profile_images/993504415/css_400x400.png')

}

.reg-step {

width: 240px;

height: 325px;

border: 3px solid white;

color: white;

position: relative;

text-align: center;

padding: 0px 7px;

}

.reg-step h1 {

font-size: 14px;

text-transform: uppercase;

}

.reg-step p {

font-size: 11px;

}

.reg-step img {

display: block;

margin: 10px auto 20px;

}

.reg-step .step-number {

font-size: 40px;

margin: 0 auto;

display: inline-block;

position: relative;

top: -23px;

width: 50px;

border: 1px solid black;

background-color: blue;

}

.reg-step .steps-separator {

width: 90%;

margin: 20px auto;

height: 1px;

background-color: white;

padding: 0px 7px;

}

期望的结果如下所示：