用图案或图像填充边框？

Question

我有按类别分开的企业列表。 在每个类别名称的旁边，相隔大约20像素，我希望有一个3像素高的边框延伸到div的末尾。 我希望该边框充满图案或图像。 最初，我尝试仅使用图像，但是由于每个类别名称的长度都不同，因此被证明是不切实际的。

我敢肯定有一个相对简单的方法可以做到这一点，但我不确定如何实现它。 有想法吗？

谢谢。

更新图片 在此处输入图片说明

Answer 1

在这里，我使用<div>来显示<h1> 类别后面的边框，其中<body>和<h1>都具有匹配的背景图案（也已对齐）

例子jsfiddle

的CSS

body {
    background:url('http://subtlepatterns.subtlepatterns.netdna-cdn.com/patterns/gray_jean.png');
    font-family:helvetica,arial,sans-serif;
}

#container {
    margin:0 20px;
    position:relative;
}

h1 {
    position:relative;
    float:left;
    padding-top:6px;
    padding-right:20px;
    font-size:2em;
    background:url('http://subtlepatterns.subtlepatterns.netdna-cdn.com/patterns/gray_jean.png')
}

.border {
    background:url('http://s3.amazonaws.com/creattica/uploaded-images/0016/6142/patterns_009_blue-hexagon-pattern_crop-iphone_web_for-creattica.jpg') repeat-x -10px 0;
    position:absolute;
    top:20px;
    width:100%;
    height:3px;
}

.listings {
    clear:both;
}

的HTML

<div id="container">
    <div class="border"></div>
    <h1>Catering</h1>
    <div class="listings">
        <ul>
            <li>
                Catering Company 1
            </li>
            <li>
                ...
            </li>
        </ul>
    </div>
</div>

Answer 2

如果允许使用其他标记（并且您的父元素具有坚实的背景），则可以通过以下方式进行处理：

h1 {
    background: red; /* replace with background-image */
}

h1 span {
    background: white; /* replace with color of parent element's bg */
}

<h1><span>Test Headline</span></h1>

http://jsfiddle.net/358Gg/

用图案或图像填充边框？

问题描述

2 个解决方案

解决方案1
2 已采纳 2012-12-19 21:51:25

解决方案2
0 2012-12-19 22:03:05

用图案或图像填充边框？

问题描述

2 个解决方案

解决方案1 2 已采纳 2012-12-19 21:51:25

解决方案2 0 2012-12-19 22:03:05

解决方案1
2 已采纳 2012-12-19 21:51:25

解决方案2
0 2012-12-19 22:03:05