Hide Teil eines Rahmens in CSS?

Ich habe ein paar einfache CSS-Klassen für ein Panel mit einer Überschrift. Es funktioniert gut, wenn der Hintergrund eine feste Farbe hat, da ich diese Farbe verwenden muss, um den Rand hinter dem Kopfzeilentext auszublenden. Jetzt möchte ich jedoch ein Hintergrundbild anstelle einer Volltonfarbe haben.

Gibt es eine Möglichkeit, das Header-Element den Rand des übergeordneten Elements zu verdecken UND das Hintergrundbild durchscheinen zu lassen? Ich kann die Farbe leicht auf @ setztransparent, aber nichts, was ich gefunden habe, deckt den Rand ab, außer einfarbig oder ein Bild.

Ich habe eine Vermutung, es könnte mit JS gemacht werden und das Bild als Hintergrund für die Kopfzeile wiederverwenden und einige Offsets basierend auf der Position auf der Seite festlegen, aber das scheint zu kompliziert zu sein und wird für mich nicht funktionieren, da ich es getan hätte möchten mehrere geschichtete Hintergrundbilder berücksichtigen, die ein Muster bilden, oder feste Anhänge, die ständig neu berechnet werden müssten.

Gibt es eine Möglichkeit, dies zu tun?

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