Eu tenho algumas classes CSS simples para um painel com um cabeçalho. Funciona muito bem quando o plano de fundo é uma cor fixa, porque tenho que usar essa cor para ocultar a borda atrás do texto do cabeçalho. No entanto, agora quero ter uma imagem de plano de fundo em vez de uma cor sólida.

Existe uma maneira de o elemento de cabeçalho cobrir a borda do elemento pai E permitir que a imagem de plano de fundo seja exibida? Eu posso facilmente definir a cor paratransparent, mas nada que encontrei cobre a borda além de uma cor ou imagem sólida.

Eu tenho um palpite de que isso poderia ser feito com JS e reutilizar a imagem como plano de fundo do cabeçalho e definir algumas compensações com base na posição na página, mas isso parece excessivamente complicado e não funcionará para mim desde que eu gostaria para explicar várias imagens de plano de fundo em camadas que formam um padrão ou anexo fixo que precisaria ser recalculado constantemente.

Existe uma maneira de fazer isso?

.panel {
    border: 2px solid #000000;
    padding: 1em;
    margin: 1em;
    display: block;
}

.panel-header {
    position: relative;
    top: -1.5em;
    background-color: #ffffff;
    padding-left: 0.4em;
    padding-right: 0.4em;
    font-size: 1.2rem;
    font-weight: bold;
}

.panel-content {
    margin-top: -0.5em; 
}

<div class="panel">
  <span class="panel-header">
    Title Goes Here
    </span>
  <p class="panel-content">Glorious baklava ex librus hup hey ad infinitum. Non sequitur condominium facile et geranium incognito.</p>
  </div>

<hr/>

<div style="background-image: url(http://placekitten.com/510/200); padding: 2em;">
  <div class="panel">
    <span class="panel-header">
      Title Goes Here
      </span>
    <p class="panel-content">Glorious baklava ex librus hup hey ad infinitum. Non sequitur condominium facile et geranium incognito.</p>
    </div>
</div>