1

World of Warcraftフォーラムでは、私がエミュレートしたいすっきりとしたスタイルが設定されています。やり方がわからなかったので、彼らのスタイルシートを掘り下げて、その断片をつかみ、それらを組み合わせて、似たようなスタイルを作る方法を学ぶことにしました。

スタイルシートを調べてみると、この画像が見つかりました。ご覧のとおり、これはフォーラム投稿の背景ですが、固定サイズです。 これが私の質問です-ユーザーの投稿が写真よりもはるかに長い場合、どのようにして動的に長さを増やすのですか？

テストWebサイトで、そのセクションで使用したものと同じCSSを取得しました。彼らはそれをoverflow：hiddenに設定しています。それが画像を増やし続けないように。当然、コードの一部をコピーすると、テストWebサイトでこの混乱が発生します。

小さい投稿では切り取るだけなので正しく機能しますが、サイズに応じて乗算される非常に薄い（設定された幅、おそらく高さ1ピクセル）.jpg画像があると思います。フォーラムの投稿。

誰かが私がこれを行う方法を知っていますか？

PS当然、私は彼らの画像などを使用するつもりはありません-私は今のところ、自分で作成する方法を理解するためにそれをコピーするだけです。

4

3 に答える 3

3

投稿の背景色は、その画像の一番下の色と同じように見えます。そうすれば、画像が実際にサイズを変更することはありません。

CSSの例は次のようになります。 

#yourPostSelector {
  background-image: url('path/to/image.jpg');
  background-position: top left; /* or 'top center' - whatever works for you */
  background-attachment: scroll;
  background-color: #000000; /* pick the bottom color of your background image */
}
于 2012-06-20T18:39:09.227 に答える
3

何かのようなもの：

CSS: 

.post 
 {
   background:#1A0F08 url(http://us.battle.net/wow/static/images/layout/cms/post_bg.jpg) top no-repeat; 
 }

(画像と色は実際に使用したものです。そのことで訴えられないことを願っています :) )

あなたが探しているものです。背景画像は一番上に配置され、そこにとどまりますが、コンテナーの残りの高さは、画像が (グラデーションを使用して) フェードするのと同じ背景色になります。画像が引き伸ばされたような錯覚に過ぎませんが、実質的には、画像が終了するところで中断が見られないということです。

于 2012-06-20T18:41:06.347 に答える
1

使用した背景色を変更するだけで＃00000 *

完全に混ざり合うように、使用する背景画像の色、基本的には下部に変更する必要があります。現在、現在の画像によると、コードは次のようになります：-

.body {
    background: url("../images/post_bg.jpg") no-repeat scroll 50% 0 #1A0F09;
    clear: both;
    height: 100%;
    margin: 0 auto;
    overflow: hidden;
    width: 990px;
}

このクラスを更新して結果を確認してください。ここのコメントがわからない場合は、理解できるでしょう。

于 2012-06-20T18:49:54.027 に答える