我有几个简单的CSS类,用于一个带有标题的面板。当背景是固定颜色时,它工作得很好,因为我必须使用该颜色来隐藏标题文本后面的边框。然而,我现在希望有一个背景图像,而不是纯色。
**有没有一种方法可以让header元素覆盖父元素的边框,并允许背景图像显示出来?**我可以很容易地将颜色设置为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>
3条答案
按热度按时间juzqafwq1#
我认为这是一个更有用的版本,只需要一个额外的div,几乎可以转移到任何图像。另外,这是一个很大的优势,没有额外的图像部分将是必需的。它是可重用的!
41ik7eoe2#
首先,你需要一个带有背景的容器
div
(我从网上随机抓了一个)。之后,您可以使用
<fieldset>
和<legend>
HTML标记来实现所需的效果。中央支助组:
超文本标记语言:
这里可以看到Fiddle
brvekthn3#
这是一个常见的问题。
我的解决方案是:
1.将
.panel-header
的背景设置为与背景图像相同。1.设置
z-index: 0
使其成为顶层。1.调整
background-position
属性。调整
background-position
时,也可以使用jQuery计算偏移量,使其准确。希望有帮助,看看这个片段。
有效的代码只是添加:
snipet:
x一个一个一个一个x一个一个二个x