Question

有没有办法实现类似于表格标签的div标题（放置在边框的中间），但有div的边界？问题是我不能简单地使用H1（标题）元素的背景颜色，因为我在始终可见的body元素上应用了渐变背景图像。

代码：

#text_caption {
    border-bottom: 2px solid #838383;
    margin-top: 30px;
    position: relative;
}
#text_caption H1 {
    padding: 0 10px;
    position: absolute;
    top: -45px;
}
<div id="text_caption">
<h1>inspirations to seeing and doing</h1>
</div>

几乎所有东西都很棒，除了我需要通过H1元素敲除div边框以使DOM中的背景图像更高可见。

jsfiddle示例： http://jsfiddle.net/petko3000/crkstrah/

感谢您的帮助。

Answer 1

没有得到你的问题，但如果你想让它看起来像这样：

------- H1标题带文字-------

您可以尝试以下操作：

<html>
    <head>
        <style>
            h1:after { margin-left: 2%; }
            h1:before { margin-left: -52%; width: 48%; text-align: right; }

            h1:before, h1:after {
                position: absolute;
                top: 51%;
                margin-top: -1px;
                overflow: hidden;
                width: 50%;
                height: 1px;
                content: '\a0';
                border-bottom: 3px solid black; 
            }

            h1 { margin: 0.5em 0 0.1em; position: relative; z-index: 1; overflow: hidden; text-align: center; }
        </style>    
    </head>

    <body>
            <h1>Inspirations to seeing and doing</h1>
    </body>
</html>

如何创建类似于表格标签的div标题与背景div边界的淘汰赛

1 个答案: