javascript - 使文本左侧和右侧的图形根据文本量改变宽度？

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}