У меня есть несколько простых классов CSS для панели с заголовком. Он прекрасно работает, когда фон имеет фиксированный цвет, потому что я должен использовать этот цвет, чтобы скрыть границу за текстом заголовка. Однако теперь я хочу иметь фоновое изображение вместо сплошного цвета.

Есть ли способ, чтобы элемент заголовка покрывал границу родительского элемента И позволял фоновому изображению просвечивать? Я могу легко установить цветtransparent, но ничто, что я нашел, не покрывает границы, кроме сплошного цвета или изображения.

У меня есть предчувствие, что это можно сделать с помощью JS и повторного использования изображения в качестве фона заголовка и установки некоторых смещений в зависимости от положения на странице, но это кажется слишком сложным, и не будет работать для меня, поскольку я хотел бы учитывать несколько слоистых фоновых изображений, образующих узор, или фиксированное вложение, которое постоянно нужно пересчитывать.

Есть ли способ сделать это?

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