6

カテゴリ別に分類されたビジネスのリストがあります。各カテゴリ名の横に、約20ピクセル離れたところから始めて、3ピクセルの高さの境界線をdivの最後まで伸ばしたいと思います。その境界線をパターンや画像で埋めてほしい。最初は画像だけを使ってみましたが、カテゴリ名ごとに長さが違うので実用的ではありませんでした。

これについては比較的簡単な方法があると確信していますが、それを実現する方法がわかりません。アイデア？

ありがとう。

理想

更新された画像 ここに画像の説明を入力してください

4

2 に答える 2

2

ここでは、との両方が一致する背景パターン（これも並んでいます）があるカテゴリ<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>​
于 2012-12-19T21:51:25.530 に答える
0

追加のマークアップが許可されている場合（および親要素の背景がしっかりしている場合）、次のように実行できます。

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/

于 2012-12-19T22:03:05.793 に答える