2

ページの下部を繰り返し三角形で飾りたいと思います。写真は1つの三角形を示していますが、水平方向のdiv全体を埋めたいです。

これまでのスクリーンショット: http://i.stack.imgur.com/JJA6D.png

<div class="container triangle"> </div>

.triangle {
width: 0px;
height: 0px;
border-style: solid;
border-width: 15px 15px 0 15px;
border-color: #c2cf31 transparent transparent transparent;
background-color: white;
}

これは可能ですか、それとも背景として img を使用する必要がありますか?

助けてくれてありがとう。

4

5 に答える 5

2

CSS で背景画像を使用します。

background:url("http://site.com/img/whatever.svg");

そして、水平方向にのみ繰り返すように設定します-

background-repeat:repeat-x;

これは、はい、背景画像を使用する必要があることを意味します。

jQuery などを使用して要素を複製することもできますが、その価値はないと思います。

于 2013-06-21T09:26:06.783 に答える
1

試してみたい場合は、要素 (この場合は三角形の div) を背景画像として使用できる CSS プロパティがあります。このプロパティはbackground:element().

こちらの Firefoxでデモを見ることができます。

ただし、このプロパティは-moz-接頭辞付きの Mozilla でのみ機能しますが、Webkit ブラウザーでも機能する試みがありました。したがって、うまくいけば、これはより広範なブラウザのサポートにより、将来実装される可能性があります。

于 2013-06-21T11:18:13.343 に答える
1

私の意見では、リンクなどとして使用されていない場合は CSS で背景画像を使用することです。それを念頭に置いて、画像にCSSを使用してください。

background-image: url("yoururl/image.jpg") repeat-x;

言及されているように、技術的には JQuery の clone メソッドを使用できます。これは悪い考えです。CSS がページを処理するときに、ページが行うことを追加する必要はありません。

于 2013-06-21T09:24:58.973 に答える
0

イメージを背景として使用し、繰り返します。HTMLコードの画像よりも背景画像の方が好きだと言わざるを得ません。これは、html コードのイメージとして人々が簡単にコピーできない原因です。

于 2013-06-21T09:15:35.217 に答える