0

申し訳ありませんが、Web プログラミングに関する私の能力はかなり限られているため、正しい用語を知らないため、トピックをグーグル検索することさえ困難になります..

とにかく、私の質問は（私はこれについて話す方法を本当に知らないので、奇妙な言葉遣いになると確信しています）は次のとおりです。

この疑似コードをhtml + cssで実現する方法はありますか?

css ファイル:

#ropeimage {
    background-repeat:repeat-x;
    background:url(images/rope.png);
}

#ropetext {
    <div id="ropeimage">
   /* some text properties */
}

そしてhtmlファイルで

<div id="ropetext">hello</div>
<div id="ropetext">there</div>

私が質問する理由は

<div id="ropetext"><div id="ropeimage">hello</div></div>
<div id="ropetext"><div id="ropeimage">there</div></div>

これが常に必要であることがわかっている場合は、css ファイルに隠しておきましょう。

誰かが興味を持っている場合、私がやろうとしているのは、「ロープ」画像を繰り返す div を構築し、テキストを垂直に印刷することです。ロープの背景画像がテキストの下で繰り返されるため、通常、これらすべてを 1 つの div に含めることはできません。テキスト div に到達するとすぐに画像の繰り返しが停止するように、2 つの div が必要です。

私が何をしようとしているのかを説明する大雑把な図

4

1 に答える 1

2

使うより使いidたいと思いますclass。

したがって、CSS は次のようになります。

.ropetext {
    /* properties */
}

次に、HTML で:

<div class="ropetext"></div>

クラスと ID の違いは、1 つの HTML タグだけに ID を使用することです。クラスは多くのタグに適用できます。

さらに、CSS でネストされたスタイル定義を作成できます。

.rope {
    /* properties defining any rope div in general */
    position: relative;
}

.rope .top {
    /* properties defining the top of the div */
    /* background image stuff goes here */
}

.rope .bottom {
    /* properties defining the bottom of the div */
    position: absolute;
    bottom: 0px;
}

あなたのHTMLで：

<div class="rope">
    <div class="top">
    </div>
    <div class="bottom">
        Hello
    </div>
</div>

私はこれをテストしていませんが、これはあなたが探しているものに沿っていると思います.

于 2013-04-10T22:53:36.947 に答える