在CSS中隐藏边框的一部分？

Question

我有一些带有标题的面板的简单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>

Answer 1

我认为这是一个更有用的版本，只需要一个额外的div，几乎可以转移到任何图像。另外，这是一个很大的优点，不需要额外的图像部分。它是可重复使用的！

＆＃13;

＆＃13;

.panel-wrapper {
    overflow: hidden;
}

.panel {
    border: 2px solid #000000;
    border-top: 0;
    padding: 1em;
    margin: 1em 0 0;
}

.panel-header {
    position: relative;
    top: -1.5em;
    padding-left: 0.4em;
    padding-right: 0.4em;
    font-size: 1.2rem;
    font-weight: bold;
}
.panel-header:before,
.panel-header:after {
    content: "";
    position: absolute;
    height: 2px;
    background: #000;
    top: 50%;
}
.panel-header:before {
    width: 100px;
    left: -100px;
}
.panel-header:after {
    width: 1000px;
    right: -1000px;
}
.panel-content {
    margin-top: -0.5em; 
}

＆＃13;

<div>
    <div class="panel-wrapper">
  <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>
</div>

<div style="background-image: url(http://placekitten.com/510/200); padding: 2em;">
    <div class="panel-wrapper">
  <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>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

这是您需要的样本：

首先，你需要一个带背景的容器div（我在这个例子中从互联网上抓了一个）。

在此之后，您需要使用HTML中的片段。

您的CSS

div {
    padding: 30px;
    background: url(https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSkAuRoZnkLBZlEYtgL5GJ5w_2Tufpxh5PqkOf-Negy7eL-JGC5Mk-DW-I) no-repeat  center center;
    background-size: cover;
}

fieldset {
    border: 2px solid black;
    padding: 10px;
}

您的HTML

<div>
 <fieldset>
  <legend>Personalia:</legend>
  <p>some text here</p>
 </fieldset>
</div>

在这里，您可以看到Fiddle

Answer 3

这是一个常见问题。

我的解决方案是：

1. 将.panel-header的背景设置为与背景图像相同。
2. 设置z-index: 0以使其位于顶层。
3. 调整background-position属性。

调整background-position时，您还可以使用jQuery计算偏移量，以使其准确。

希望它有所帮助，请参阅代码段。

---

有效代码只是添加：

.panel-header {
    z-index: 0;
    background-image: url(http://placekitten.com/510/200);
    background-position: -66px -38px;
}

---

snnipet：

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

.panel-header {
    position: relative;
    top: -1.5em;
    // here!
    z-index: 0;
    background-image: url(http://placekitten.com/510/200);
    background-position: -66px -38px;
    padding-left: 0.4em;
    padding-right: 0.4em;
    font-size: 1.2rem;
    font-weight: bold;
}

.panel-content {
    margin-top: -0.5em; 
}
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;