希望一起<hr />和<h3> </h3>

Question

就像上面的例子一样。我发现了一些有用的脚本和一个我喜欢的小img但是我不知道如何得到关于标题的填充因此该行不直接通过。

h3.line {
    background-attachment: scroll;
    background-clip: border-box;
    background-color: transparent;
    background-image: url(../images/line.jpg);
    background-origin: padding-box;
    background-position: center;
    background-repeat: repeat-x;
    background-size: auto auto;
    display: block;
    margin-bottom: 20px;
}

这表明了这一点。

有任何建议或想法吗？

Answer 1

您可以使用1px点图像作为背景放在H3上。然后在其间有一个背景的span元素。

CSS：

h3 {
    background: url(images/dot.png) left center repeat-x;
    padding: 10px;
    text-align: center;
}
h3 span { background: #fff; display: inline-block; padding: 10px 15px; }

HTML：

<h3><span>About</span></h3>

Answer 2

您可以在<span>中添加<h3>，并使其与<h3>具有相同的背景但不包含该行，以便<span>与<h3>有效重叠{1}}。

你可以这样说：

span {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

使它成为中心。您也可以添加宽度和高度。 line-height有助于将文字垂直放置在中间。

如果您想备用图片，可以使用text-decoration: line-through;在文字中画一条线。

Answer 3

这是使用CSS border属性而不是图像的解决方案。

html：

<h2>
  <span>This is a test</span>
  <div></div>
</h2>

这是CSS：

h2 {
    text-align:center;
    background-color:#EFEFEF;
    line-height:26px;
    position:relative;
}

span {
    background-color:#EFEFEF;
    padding-right:5px;
    padding-left:5px;
    position:relative;
    z-index:2;
}
h2 > div {
    border-bottom:1px solid grey;
    position:relative;
    z-index:1;
    top:-13px; /* half the line-height of the containing element */
}

A fiddle Demonstration

<div>放置在标题元素内部，并通过将其顶部位置设置为标题元素高度的一半（位于标题行高）而位于中间位置。 z-index用于span和div，以便跨度获得比div更高的堆栈顺序，并遮挡重叠的（边界）线。

Answer 4

我偶然发现了实现这一目标的另一种方式。

h1
{
    position: relative;
    padding: 0 26%;
}

h1:before,
h1:after
{
    width: 25%;
    background-color: rgba( 0, 0, 0, .5 );
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
}

取自：http://osvaldas.info/blog/background-independent-css-bars