用图案或图像填充边框？

Question

用图案或图像填充边框？

AMC*_*AMC 6 html css image border

我有按类别分隔的业务列表.在每个类别名称旁边,从大约20px开始,我希望有一个3px高的边框延伸到div的末尾.我希望这个边界充满图案或图像.最初,我尝试使用图像,但由于每个类别名称的长度不同,这被证明是不切实际的.

我确信有一个相对简单的方法可以解决这个问题,我只是不确定如何实现它.想法？

谢谢.

更新的图像在此输入图像描述

Answer 1

Mik*_*keM 2

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

\n\n
示例 jsfiddle
\n\n
CSS
\n\n
body {\n background:url(\'http://subtlepatterns.subtlepatterns.netdna-cdn.com/patterns/gray_jean.png\');\n font-family:helvetica,arial,sans-serif;\n}\n\n#container {\n margin:0 20px;\n position:relative;\n}\n\nh1 {\n position:relative;\n float:left;\n padding-top:6px;\n padding-right:20px;\n font-size:2em;\n background:url(\'http://subtlepatterns.subtlepatterns.netdna-cdn.com/patterns/gray_jean.png\')\n}\n\n.border {\n 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;\n position:absolute;\n top:20px;\n width:100%;\n height:3px;\n}\n\n.listings {\n clear:both;\n}\n\xe2\x80\x8b\n
Run Code Online (Sandbox Code Playgroud)\n\n
超文本标记语言
\n\n
<div id="container">\n <div class="border"></div>\n <h1>Catering</h1>\n <div class="listings">\n <ul>\n <li>\n Catering Company 1\n </li>\n <li>\n ...\n </li>\n </ul>\n </div>\n</div>\xe2\x80\x8b\n
Run Code Online (Sandbox Code Playgroud)\n

归档时间：	13 年，8 月前
查看次数：	3003 次
最近记录：	13 年，8 月前