css - 在标题和链接之间垂直重复的图像填充空间

Question

我被这个难住了。实现这一目标的最优雅/最有效的方法是什么？我h3在左边有一个重复的符号/图像（“::::::”），然后是一个链接。这发生在h3整个站点的几个 /link 区域之间。

另请注意，我使用的是十二列模式，特别是 Foundation。

Answer 1

设置一个带有重复符号且宽度为 100% 的背景元素，然后为文本设置一个白色背景并将其置于背景之上。

<div id="wrapper">
   <div id="text1">Featured Courses</div>
   <div id="text2">See All Courses</div>
</div>

和 CSS：

#wrapper{
   width:100%;
   background:url(image.png) repeat-x;
   height:20px;
}
#text1, #text2{
   background-color:#fff
   padding:5px
   height:10px;
}
#text1{
   float:left
}
#text2{
   float:right
}

这可能不是您所需要的，但您明白了。