父本与h2保证金为负的重叠边界 [英] Overlap border of parent with h2 margin negative

问题描述

我想达到这个效果：

但具有图像背景。我尝试了一切我可以想象，但它似乎仍然得到这个：

很明显， background-color：transparent 既不设置颜色。我想可能有一个黑客，我可以使我的h2重叠的框的边框。

谢谢你，

弗罗林

PS一些代码如下：

HTML：

 < div class =box> 
< h2>关于我们< / h2> 
< / div> 
  

CSS：

 code> .box {
 border：1px solid white; 
} 
 
 .box h2 {
 margin：-15px auto 20px; 
 width：250px; 
 font-size：25px; 
} 
  

解决方案

分别（左+右有伪内容）。

  body {background：gold;} div {border：1px solid black; border-top-width：0; text-align：center;} h2 {display：table; width：100％; margin-bottom：-10px;} h2：before，h2> span，h2：after {display：table-cell; white-space：nowrap;} h2> span {padding：0 10px;位置：相对; top：-10px;} h2：before，h2：after {content：; border-top：1px solid black; width：50％;}  

 < div& < h2>< span> Hello World< / span>< / h2> < p> Lorem ipsum dolor sit amet，consectetur adipiscing elit，sed do eiusmod tempor incididunt ut labore et dolore magna aliqua。 < / div>  

I want to achieve this effect:

but with image background. I tried everything I could imagine but it seems I still get this:

It's obvious that background-color: transparent won't work, neither setting a color. I am thinking maybe there is a "hack" that I may use to make my h2 overlap the border of the box.

Thank you,

Florin

P.S. Some code as some asked:

HTML:

<div class="box">
    <h2>ABOUT US</h2>
</div>

CSS:

.box {
    border:1px solid white;
}

.box h2 {
    margin: -15px auto 20px;
    width:250px;
    font-size: 25px;
}

解决方案

You can create the top borders separately (left + right with pseudo content).

body {
    background: gold;
}
div {
    border: 1px solid black;
    border-top-width: 0;
    text-align: center;
}
h2 {
    display: table;
    width: 100%;
    margin-bottom: -10px;
}
h2:before, h2 > span, h2:after {
    display: table-cell;
    white-space: nowrap;
}
h2 > span {
    padding: 0 10px;
    position: relative;
    top: -10px;
}
h2:before, h2:after {
    content: "";
    border-top: 1px solid black;
    width: 50%;
}

<div>
    <h2><span>Hello World</span></h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

这篇关于父本与h2保证金为负的重叠边界的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！