html - 如何在 <h1> 中使用图像和重复背景

Question

我正在尝试创建一个 <h1>以文本为中心，每边一个图像，然后动态填充行以达到容器的剩余宽度。

我已经尝试了一些技术...目前使用 :before 和 :after，带有嵌套跨度。 :after 正在工作，但试图解决 :before 部分。

fiddle :jsfiddle.net/dtar4rgs/

Answer 1

您可以使用 flex实现您想要做的事情( demo (supports flexbox) ， demo (doesn't support flexbox) ):

<div id="container">
    <h1><span>a b c</span></h1>
    <p>Change text shorter or longer.</p>
    <p>Need left lines to be dynamic.</p>
</div>

h1 {
    display:flex; /* Treats the :before, :after, and span as individual items */
    align-items:center; /* Aligns items vertically (to align border properly) */
    text-align:center; /* Aligns items horizontally for browsers that don't support flexbox */
}
h1 span {
    /* Places arrow on each side of span */
    background: url('https://dl.dropboxusercontent.com/u/101534624/arrow_cyan.gif') no-repeat left,
    url('https://dl.dropboxusercontent.com/u/101534624/arrow_cyan.gif') no-repeat right;
    padding: 0 50px; /* Prevents text from overlapping image */
}
h1:before,
h1:after {
    content: " ";
    /* Lines on sides of header */
    background: url('https://dl.dropboxusercontent.com/u/101534624/h1-lines.png') repeat-x;
    height: 6px; /* Height of lines */
    flex-grow:1; /* Makes lines expand to edges of screen */
}

注意: Support for flexbox缺少 (IE11+)，但使用 text-align:center，唯一的区别是缺少行。