作者：手机用户2602926907 | 来源：互联网 | 2023-05-24 13:31
我有一些带有标题的面板的简单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;
}
Glorious baklava ex librus hup hey ad infinitum. Non sequitur condominium facile et geranium incognito.
Glorious baklava ex librus hup hey ad infinitum. Non sequitur condominium facile et geranium incognito.
1> Aaron..：
我认为这是一个更有用的版本,只需要一个额外的div,几乎可以转移到任何图像.另外,这是一个很大的优点,不需要额外的图像部分.它是可重复使用的!
.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;
}
Glorious baklava ex librus hup hey ad infinitum. Non sequitur condominium facile et geranium incognito.
Glorious baklava ex librus hup hey ad infinitum. Non sequitur condominium facile et geranium incognito.
京公网安备 11010802041100号