在 CSS 中隐藏部分边框?
Hide part of a border in CSS?
我有一些简单的 CSS 类 用于带有 header 的面板。当背景是固定颜色时效果很好,因为我必须使用该颜色来隐藏 header 文本后面的边框。但是,我现在想要一个背景图像而不是纯色。
有没有办法让 header 元素覆盖 parent 元素的边框并让背景图像显示出来? 我可以很容易地将颜色设置为 transparent
,但我发现除了纯色或图像外,没有任何东西会覆盖边框。
我有预感可以用 JS 来完成,并重新使用图像作为 header 的背景,并根据页面上的位置设置一些偏移量,但这似乎过于复杂,并且不会'对我不起作用,因为我想考虑形成图案的多个分层背景图像,或需要不断重新计算的固定附件。
有办法吗?
.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>
这是一个常见问题。
我的解决方案是:
- 将
.panel-header
的背景设置为与背景图片相同。
- 设置
z-index: 0
使其到达顶层
- 调整
background-position
属性.
调整background-position
时,也可以用jQuery计算偏移量,使其准确。
希望对您有所帮助,请查看代码段。
有效代码只需添加:
.panel-header {
z-index: 0;
background-image: url(http://placekitten.com/510/200);
background-position: -66px -38px;
}
snnipet:
.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;
}
<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>
我认为这是一个更有用的版本,只需要一个额外的 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;
}
<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>
这是您需要的样本:
首先,您需要一个容器 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
我有一些简单的 CSS 类 用于带有 header 的面板。当背景是固定颜色时效果很好,因为我必须使用该颜色来隐藏 header 文本后面的边框。但是,我现在想要一个背景图像而不是纯色。
有没有办法让 header 元素覆盖 parent 元素的边框并让背景图像显示出来? 我可以很容易地将颜色设置为 transparent
,但我发现除了纯色或图像外,没有任何东西会覆盖边框。
我有预感可以用 JS 来完成,并重新使用图像作为 header 的背景,并根据页面上的位置设置一些偏移量,但这似乎过于复杂,并且不会'对我不起作用,因为我想考虑形成图案的多个分层背景图像,或需要不断重新计算的固定附件。
有办法吗?
.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>
这是一个常见问题。
我的解决方案是:
- 将
.panel-header
的背景设置为与背景图片相同。 - 设置
z-index: 0
使其到达顶层 - 调整
background-position
属性.
调整background-position
时,也可以用jQuery计算偏移量,使其准确。
希望对您有所帮助,请查看代码段。
有效代码只需添加:
.panel-header {
z-index: 0;
background-image: url(http://placekitten.com/510/200);
background-position: -66px -38px;
}
snnipet:
.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;
}
<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>
我认为这是一个更有用的版本,只需要一个额外的 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;
}
<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>
这是您需要的样本:
首先,您需要一个容器 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