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

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

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

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

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

background-repeat 属性の概要:

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

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

属性値:

繰り返しデフォルト。背景画像が縦横に繰り返し表示されます。
#repeat-x 背景画像が水平方向に繰り返し表示されます。
#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 までご連絡ください。

前の記事：CSSで背景を設定する方法次の記事：CSSで背景を設定する方法

続きを見る