css - ヘッダーとリンクの間に垂直方向に繰り返される画像の塗りつぶしスペース

Question

私はこれに困惑しています。これを実現するための最もエレガントで効率的な方法は何ですか？左側に、繰り返しの記号/画像（ " :::::: h3"）、そしてリンクがあります。これはh3、サイト全体のいくつかの/linkエリア間で発生します。

また、12列のスキーマ、特に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
}

これはおそらくあなたが必要としているものではありませんが、あなたはその考えを理解します。