小编Nat*_*abe的帖子

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

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

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

html css transparency background css3

Nat*_*abe

lucky-day

6
推荐指数

2
解决办法

5651
查看次数