HTML – 如何用元素覆盖边框？

概述In this example,div的边缘顶部有一个数字.为了说清楚,我希望用数字覆盖哪个边界部分,我也给了这个数字的边界.当然,我们可以给出数字的背景颜色,但是身体的背景图像被隐藏了.我们怎样才能隐藏数字透明度的边界？ HTML： <div class="reg-step first-step"> <span class="step-number">1</span> <img sr In this example,div的边缘顶部有一个数字.为了说清楚,我希望用数字覆盖哪个边界部分,我也给了这个数字的边界.当然,我们可以给出数字的背景颜色,但是身体的背景图像被隐藏了.我们怎样才能隐藏数字透明度的边界？

HTML：

<div >   <span >1</span>   <img src="" alt="Register">   <h1>Register</h1>   <div ></div>   <p>Lorem ipsum dolor sit amer,consetetur sed iam nonumy eirmod tempor invIDunt ut labore et dolore magna aliquayam erat,sed diam vo</p></div>

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;}

期望的结果如下所示：

解决方法 您可以使用

<fIEldset>

为了那个原因.

检查小提琴https://jsfiddle.net/sepyzund/

HTML：

<fIEldset >    <legend >1</legend>    <img src="" alt="Register">    <h1>Register</h1>    <div ></div>    <p>Lorem ipsum dolor sit amer,sed diam vo</p></fIEldset>

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;    display: block;    margin: 0 auto;    wIDth: 50px;    border: 1px solID black;}.reg-step .steps-separator {    wIDth: 90%;    margin: 20px auto;    height: 1px;        background-color: white;    padding: 0px 7px;}

总结

以上是内存溢出为你收集整理的HTML – 如何用元素覆盖边框？全部内容，希望文章能够帮你解决HTML – 如何用元素覆盖边框？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。