Tengo algunas clases simples de CSS para un panel con un encabezado. Funciona muy bien cuando el fondo es un color fijo porque tengo que usar ese color para ocultar el borde detrás del texto del encabezado. Sin embargo, ahora quiero tener una imagen de fondo en lugar de un color sólido.

¿Hay alguna manera de que el elemento del encabezado cubra el borde del elemento principal Y permita que se muestre la imagen de fondo? Puedo configurar fácilmente el color paratransparent, pero nada de lo que he encontrado cubrirá el borde que no sea un color sólido o una imagen.

Tengo el presentimiento de que podría hacerse con JS y reutilizar la imagen como fondo del encabezado y establecer algunos desplazamientos en función de la posición en la página, pero eso parece demasiado complicado, y no funcionará para mí ya que me gustaría para tener en cuenta varias imágenes de fondo en capas que forman un patrón o un archivo adjunto fijo que tendría que ser recalculado constantemente.

¿Hay alguna forma de hacer esto?

.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>