透明文本的背景

Question

我差不多完成了，但我的问题是文字的背景，我甚至尝试了不透明度，但框的下划线出现了。

＆＃13;

＆＃13;

.block {
  display: inline-block;
  border: 2px solid white;
  padding: 5px;
  margin-top: 1em;
  }
.paddingbox{
  padding: 60px;}
.boxed {
  float: left;
  color: white;
  padding: 0 5px;
  margin-top: -2em;
 }

＆＃13;

<div class="paddingbox"><center> 
<div class="block">
<span class="boxed">
 <h1 style="color:white;"><?php echo get_the_title(); ?></h1></span>
  </div></center></div>

＆＃13;

＆＃13;

＆＃13;

使用背景颜色

没有背景颜色

我试图实现这样，但它有一个背景如上图所示

我尝试了fieldset并且发生了这种情况

Answer 1

可以使用fieldset代码实现此行为。

＆＃13;

＆＃13;

.block{
  display: inline-block;
  border: 2px solid white;
}
.title{
  color: white;
  font-size: 1.5em;
  text-align: center;
}

body{
  background: purple;
}

＆＃13;

<fieldset class="block">
  <legend class="title">
    Services
  </legend>
</fieldset>

＆＃13;

＆＃13;

＆＃13;

Answer 2

我得到了position的帮助来解决这个问题！

div {
    position: relative;
    width: 400px;
    padding: 10px;
    border: 1px solid;
}

span {
    position: absolute;
    top: -10px;
    left: 40%;
    background-color: #FFF;
    font-weight: bold;
}

<div>
   <span>About Us</span>
</div>