Question

我有以下代码：https://codepen.io/aceraven777/pen/dyPGBeX

HTML：

<html>
  <body>
    <div class="box">
      <div class="title-container">
        <h1>title</h1>
      </div>
      <p>this is the description</p>
    </div>
  </body>
</html>

CSS：

body {
  background: url('https://images.pexels.com/photos/255379/pexels-photo-255379.jpeg');
      background-size: cover;
  padding-top: 30px;
}

.box {
  border: 2px solid white;
  width: 100px;
  margin: auto;
  padding: 30px;
  position: relative;
}

.box .title-container {
  position: absolute;
  top: -22px;
  left: 0;
  width: 100%;
  text-align: center;
}

.box .title-container h1 {
  background-color: transparent;
  margin: 0;
  padding: 3px 10px;
  display: inline;
}

这是HTML的输出：

请记住，这里我使用的是背景图片，而不是纯背景色。

在标题部分，我希望边框不触及标题，我希望边框对于该部分是透明的，如何实现呢？

Answer 1

您需要的是HTML fieldset。

 <fieldset>
  <legend style="text-align: center;">Personalia:</legend>
  Name: <input type="text"><br>
  Email: <input type="text"><br>
  Date of birth: <input type="text">
 </fieldset>

Answer 2

在html和css下面使用：

<html>
  <body>
 <div id="content">
    <div class="titlebox"><span><b>title</b></span></div>
    <p>this is the description</p>
</div>
  </body>
</html>

CSS：

 #content{
    position:relative;
    margin:100px;
    border:solid #999;
    border-width:0 2px 2px;
    padding-top:1px;
}
.titlebox{
    position:absolute;
    top:-.6em;
    left:0;
    padding:.6em 0 .6em;
    width:100&#37;;
    height:2px;
    overflow:hidden;
    font-size:100%; /* any size */
    line-height:1.2; /* corresponds to the padding and margins used */
}
.titlebox span{
    float:left;
    border:solid #999;
    border-width:0 72em 0 30px;
    height:2px;
}
.titlebox b{
    position:relative;
    display:block;
    margin:-1.2em 0 -.6em;
    padding:.6em 5px 0;
    font-weight:400;
}

如何使边框在某一部分透明？

2 个答案: