0

テキストの左右にある 2 つのグラフィックスの中央に H1 タグを配置する必要があります。H1 テキストは、現在のページに応じてさまざまな幅になります。左側の点はサイトの左端にとどめ、線はテキストの端に達するまで延長する必要があります。右側も同様。CSSまたはjquery/javascriptを使用してこれを達成する方法はありますか?

ここに画像の説明を入力

添付の図で、テキストが「WHO YOU ARE」だけの場合、左右のバーを広げて、テキストの端に突き当たるようにする必要があります。

背景はテクスチャ (例の画像では見にくい) であるため、テキストの背後に単色を使用することはできません。:(

4

2 に答える 2

0

これはすべて、単純な html と css で実行できます。投稿した画像を 2 つの側面とメインの h1 自体の背景に使用します。画像内のテキストは css で削除できません。より適切な画像が必要です。ブラウザのページで次のことを試してください。jsfiddle.net は、このサイトからの画像へのアクセスをブロックしているようです

ブラウザー コンソールを使用して、各要素の css を調べ、必要に応じて調整します。メインフレームワークはそこにあります。好みに合わせて調整する必要があります

HTML

<h1>
    <span class="h1_left">&nbsp;</span>
    <span class="h1_text">H1 Title Text</span>
    <span class="h1_right">&nbsp;</span>
</h1>

CSS

h1 {
    text-align:center;
    color:#FC3;
    background-image:url(http://i.stack.imgur.com/meq5P.png);
    background-position:left 0;
    max-width: 700px;
    min-width:360px;
    padding:0;
    height:40px;
}

.h1_left,
.h1_right {
    display: inline-block;
    width:40px;
    height:100%;
    background-image:url(http://i.stack.imgur.com/meq5P.png);
    overflow:hidden;
}

.h1_text {
    background-color: #000;
    display: inline-block;
    height: 100%;
    padding: 0 10px;
    font-size:20px;
    line-height:40px;
}

.h1_right {
    float:right;
    background-position: 100% 0;
}
.h1_left{ float:left}
于 2012-10-15T22:51:56.770 に答える
0

これを試してください：http://jsfiddle.net/NpCP5/

ここでは、2 つのグラフィックを使用する代わりに、h1 の背後にある 1 つを使用し、h1 の背景色を設定します (ギャップ効果のため)。これは、css のみを使用して、行の両側に最小限のスペースを使用して動的に達成することもできます。

于 2012-10-15T21:11:39.293 に答える