0

スクリーンショットでわかるように、大きなモニターに表示すると背景画像が繰り返されます。

ここに画像の説明を入力

誰かがこれに対する回避策を提案していますか?

(可能であれば、CSS コードのサンプルも)

ライブサイト: http://www.carleighmac.org/

4

4 に答える 4

2

明らかな答えは、次を使用することです。

#featured-area {
    /* other CSS unchanged */
    background-repeat: no-repeat;
}

現在、Chrome の Web インスペクター ツールは、次のように定義された background-property ルールを表示します。

background: url(/themes/sunrise/img/nav/slider-background-baby.jpg) repeat-x top center;

repeat-x'を上記に置き換えると、no-repeatこれは上記の簡略版になります。

于 2013-06-10T05:39:38.800 に答える
1

繰り返し表示したくなく、全幅で表示したい場合 (画像がモニター画面よりも小さい場合)、この css を使用できます。

その他のオプションはこちらhttp://css-tricks.com/perfect-full-page-background-image/

#yourElementID {
  float:left;
  width:100%;
  height:300px; 
  background: url(images/bg.jpg) no-repeat top center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
于 2013-06-10T06:01:38.363 に答える
0

画像がディスプレイに収まらない場合は、画像を繰り返すか、中央に配置するか、画像に合わせる (ズームしてトリミングする) 必要があります。

  1. センタリングについては、CSS のみで非常に簡単に行うことができます。他の回答で述べられているように、非繰り返しオプションを使用してください。しかし、私の意見では、これは少し醜く見えるかもしれません。
  2. 繰り返しますが、あなたはすでにそれを持っています。
  3. 適合性に関する限り、こちらの素晴らしい記事を参照できます: http://css-tricks.com/perfect-full-page-background-image/
于 2013-06-10T07:05:24.353 に答える
0

background 省略形プロパティを使用すると、次のようになります。

background: url("/themes/sunrise/img/nav/slider-background-baby.jpg") no-repeat center top;

詳細はこちら。

于 2013-06-10T05:47:11.327 に答える