3

http://cl.ly/0m3F0j392e0G1n0s0T34理想的 には、見出しにテキストを使用し、その後に 10px x 10px の gif を水平方向に繰り返します。

編集: h2 要素に無地の色を設定できないように、テクスチャ付きの背景を使用したいことを追加する必要があります。

見出しの後にGIFを追加できましたが、repeat-xを追加しても繰り返すことができません。私が使用したコードは次のとおりです。

h2:after {
content: 'url(img/imagehere.gif) repeat-x';
}

この方法または代替方法の回避策はありますか? 見出し全体を画像としてスライスすることは避けたいと思います。見出しを左に浮かせてから、gif を繰り返し背景画像として右に空の div を浮かせることを考えましたが、これが :after 疑似要素の目的だと思いますよね?

4

4 に答える 4

3

少しハッキーでoverflow-x:hidden;、親要素に追加する必要がありますが、トリックを実行する必要があります：

h2 {
    position: relative;
    padding-right: 10px;
    float: left;
    }
h2::after {
    content: '';
    position: absolute;
    left: 100%;
    right: 9999px;
    background: url(image.gif);
    height: 10px;
    width: 9999px;
    }
于 2011-10-23T11:00:19.123 に答える
0

after 疑似要素に任意の属性を設定できます。コンテンツを "" (空) に設定してから、疑似要素に幅と高さを設定します。その後、通常どおり、繰り返される gif に背景を設定できます。

h2:after {
  content: "";
  height:20px;
  width:400px;
  background:url('img/imagehere.gif') repeat-x top left;
}
于 2011-10-23T05:46:20.010 に答える
0

content:url()押されたクラスを使用する場合は、img要素を作成します。この場合に使用する必要がありますbackground。エリックが言ったように。

ただし、見出しのテキストのサイズが不明な場合 (別名動的コンテンツ)、疑似要素は適切な回避策ではありません。次のようなマークアップを使用できます。

<h1><span>your text content</span></h1>

そして、繰り返しの背景をに追加しますh

h1{ background:'url(img/imagehere.gif) repeat-x';}

テキストが表示される部分の背景を非表示にするには、spanの背景を単色にします

span{background:white}

アップデート：

の下に背景画像がある場合は、次のh1ことができます。

同じ HTML:<h1><span>your text content</span></h1>

CSS:

body背景画像があるとします：

body{background-image:(foo)}

bar次に、見出しの後に繰り返すイメージになりたいと考えています。これを行う必要があります：

h1{background:url(bar)}

bodyそして、あなたが持っているのと同じ背景spanをあなたのテキストを含むものに追加してください：

h1 span{background-image:(foo)}

これで問題は解決します。このFiddleを見て、実際の動作を確認してください。テキストのサイズなどには依存しません。

注：を使用している場合は、spanそれを作成する必要がありますdispaly:inline-block

アップデート：

あなたの要求に基づいて、私はこれについて再考します。今回利用tablesしました。説明のないコード:

HTML

<table>
    <tbody>
        <tr>
            <td><h1>Heading</h1></td>
            <td class="pattern"></td>
        </tr>
    </tbody>
</table>

CSS

body{background:url(foo)}
table, tbody, tr{width:100%;}
.pattern{background:url(bar); width:100%;}

実際に見る<

于 2011-10-23T05:53:05.503 に答える