html - 如何在带有 CSS 的 html 标题中间有一条水平线？

Question

好的，我现在使用图像来完成它，但我想通过 CSS 来完成(没有绝对或相对定位，我希望让它响应)。

此处示例:http://teothemes.com/wp/services/ .标题是“服务”，就在 3 个内容区域的正上方……我想只用 CSS 来达到同样的效果。我尝试了一些方法，但没有用。

谢谢。

Answer 1

这是我的做法 -> http://tinkerbin.com/QN9efWHd

• CSS3 背景图片
• 跨越背景图像。

HTML...

<p>
    <span>Services or Something</span>
</p>

...对于 CSS...

p {
    background: linear-gradient (to bottom,  rgba(145,37,37,0) 49%,
                rgba(145,37,37,1) 51%, rgba(145,37,37,1) 52%,
                rgba(145,37,37,0) 54%);
    text-align: center;
}

span {
    display: inline-block;
    padding: 0 10px;
    background: #fff;
}