ホームページ  >  記事  >  ウェブフロントエンド  >  CSSで画像を繰り返さないように設定する方法

CSSで画像を繰り返さないように設定する方法

醉折花枝作酒筹
醉折花枝作酒筹オリジナル
2021-04-15 16:34:495621ブラウズ

css では、「background-repeat」属性を使用して画像を繰り返さないように設定できます。構文は「background-repeat:no-repeat」です。この属性は、背景画像を繰り返すかどうか、および繰り返す方法を設定します。値は "no-repeat" で、背景画像が 1 回だけ表示されることを示します。

CSSで画像を繰り返さないように設定する方法

このチュートリアルの動作環境: Windows 7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。

background-repeat 属性の概要:

background-repeat 属性は、画像のタイル モードを定義します。

元の画像から繰り返します。この画像は、background-image で定義され、background-position の値に従って配置されます。

属性値:

  • 繰り返しデフォルト。背景画像が縦横に繰り返し表示されます。

  • #repeat-x 背景画像が水平方向に繰り返し表示されます。

  • #repeat-y 背景画像が縦方向に繰り返し表示されます。
  • #no-repeat 背景画像は 1 回だけ表示されます。
  • inherit は、background-repeat 属性の設定を親要素から継承することを指定します。
  • 例:
<html>
<head>
<style type="text/css">
body
{ 
background-image: 
url(/i/eg_bg_03.gif);

}
</style>
</head>
<body>
</body>
</html>

レンダリング:


css は画像を次のように設定しません繰り返します CSSで画像を繰り返さないように設定する方法

<html>
<head>

<style type="text/css">
body
{ 
background-image: 
url(/i/eg_bg_03.gif);
background-repeat: no-repeat
}
</style>

</head>

<body>
</body>
</html>

レンダリング:


推奨学習: CSSで画像を繰り返さないように設定する方法css ビデオ チュートリアル

以上がCSSで画像を繰り返さないように設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。