获取背景图像以在某一点停止平铺

Question

我正在尝试将我的PSD文件翻译成代码，我遇到了这些标题的问题。标题将包含标题的名称，以及从名称末尾的右侧延伸到div末尾的水平紫色条。我正在使用Foundation（响应式框架），所以我给了我的标题宽度为三列。我写了一些代码，但我不确定如何让紫色线不出现在标题名称下面。

目前，我已将紫色线保存为可图块化图像，并将其设置为h3标签的背景。我试图玩背景位置，但我不能让这条线没有出现在标题名称下面。

这是PSD文件的一部分的屏幕截图。为了澄清，Hours，Phone和Location旁边的紫色条不是供用户输入的任何信息;它是一种用于分隔不同信息区域的装饰品。

我的代码：

<div class="row">
    <div class="three columns offset-by-one contact">
        <h3>Hours</h3>
    </div>
</div>

.contact h3 {
    color: #444;
    background: url(../img/purpleLine.jpg) bottom right repeat-x;
}

Answer 1

只需制作一个底部边框为紫色和厚度的div。然后向左漂浮，这将给你你想要的影响。如果需要，您还可以在该div中放置一个文本框。

Answer 2

这是使用HTML元素<span>的最佳时机，因为这正是它的意图。在元素之后，添加<span></span>，为其指定所需的宽度，并设置span元素的背景图像。不确定你的框架类将如何用于定义宽度，所以我只是在那部分放了'what'。您甚至可以将一个类分配给span元素以定义其宽度。

HTML：

<div class="row">
    <div class="three columns offset-by-one contact">
        <h3>Hours</h3><span></span>
    </div>
</div>

CSS：

.contact h3 {
    color: #444;
}
.contact span {
width:whatever;
background: url(../img/purpleLine.jpg) bottom right repeat-x;
}