html - 获取背景图像以在某个点停止平铺

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 元素设置背景图像。不确定您的框架类将如何用于定义宽度，因此我只是在该部分中输入了“whatever”。您甚至可以为 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;
}