根据文本的数量，在文本的左侧和右侧创建图形更改宽度？

Question

我需要在文本左侧和右侧的两个图形之间居中放置H1标签。 H1文本将是各种宽度，具体取决于您所在的页面。左侧的点应该保留在站点的左边缘，并且该线应该延伸直到它到达文本的边缘。右侧相同。有没有办法通过使用CSS甚至一些jquery / javascript来实现这一目标？

在附图中，如果文字只是“你是谁”，我需要左右两边的条形变宽，以便碰到文字的边缘。

背景是一种纹理（在示例图像中很难看到），因此在文本后面使用纯色不是一种选择。 ：（

Answer 1

试试这个：http://jsfiddle.net/NpCP5/

我们在h1后面使用一个图形而不是使用两个图形，并设置h1的背景颜色（用于间隙效果）。这也可以通过动态实现，同时只使用css的线路两侧的最小空间。

Answer 2

这可以通过简单的html和css完成。它使用您发布的图像作为2面的背景和主h1本身。无法使用css删除图像中的文本，需要更合适的图像。 在浏览器的页面中尝试以下操作。 jsfiddle.net似乎阻止访问来自此网站的图像

使用浏览器控制台检查每个元素css并根据需要进行调整。主要框架在那里，你只需要根据自己的喜好进行调整

HTML

<h1>
    <span class="h1_left">&nbsp;</span>
    <span class="h1_text">H1 Title Text</span>
    <span class="h1_right">&nbsp;</span>
</h1>

CSS

h1 {
    text-align:center;
    color:#FC3;
    background-image:url(http://i.stack.imgur.com/meq5P.png);
    background-position:left 0;
    max-width: 700px;
    min-width:360px;
    padding:0;
    height:40px;
}

.h1_left,
.h1_right {
    display: inline-block;
    width:40px;
    height:100%;
    background-image:url(http://i.stack.imgur.com/meq5P.png);
    overflow:hidden;
}

.h1_text {
    background-color: #000;
    display: inline-block;
    height: 100%;
    padding: 0 10px;
    font-size:20px;
    line-height:40px;
}

.h1_right {
    float:right;
    background-position: 100% 0;
}
.h1_left{ float:left}