如何创建类似于表单标签的div标题，删除背景div边框

是否有一种方法来实现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/

谢谢你的帮助。

我不太明白你的问题，但是如果你想让它看起来像这样:

------- H1 Header with text -------

您可以尝试以下操作:

<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>

相关内容

最新更新

热门标签：