title: Transparent the background of the text
body: <p>I'm almost done, but my problem is the background of the text , I even try the opacity but the underline of the box appear.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.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;
   }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="paddingbox"&gt;&lt;center&gt; 
  &lt;div class="block"&gt;
  &lt;span class="boxed"&gt;
   &lt;h1 style="color:white;"&gt;&lt;?php echo get_the_title(); ?&gt;&lt;/h1&gt;&lt;/span&gt;
    &lt;/div&gt;&lt;/center&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>With backgroun color
  <a href="https://i.stack.imgur.com/KLerR.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/KLerR.png" alt="with box color"></a></p>
  
  <p>without background color</p>
  
  <p><a href="https://i.stack.imgur.com/sqUs1.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/sqUs1.png" alt="without background color"></a></p>
  
  <p>I'm trying to achive is like this, but it have a back ground like in the picture above</p>
  
  <p><a href="https://i.stack.imgur.com/Z6r9s.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Z6r9s.png" alt="enter image description here"></a></p>
  
  <p>I tried fieldset and this happen</p>
  
  <p><a href="https://i.stack.imgur.com/X9TDm.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/X9TDm.png" alt="enter image description here"></a></p>