CSS画像を繰り返さないように設定する方法-フロントエンドQ&A-php.cn

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

藏色散人

リリース： 2023-01-03 09:25:06

オリジナル

3035 人が閲覧しました

CSS 画像を非繰り返しに設定する方法: 最初に HTML サンプルファイルを作成し、次に背景画像を導入し、最後に属性を「background-repeat:no-repeat」に設定して、非繰り返し画像を実現します。

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

この記事の動作環境: Windows7 システム、HTML5&&CSS3、Dell G3 コンピューター。

css では、background-repeat 属性を使用して、画像を繰り返さないように設定できます。background-repeat 属性は、背景画像を繰り返すかどうか、および繰り返す方法を設定します。デフォルトでは、背景画像は水平方向と垂直方向に繰り返されます。

background-repeat 属性の概要:

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

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

属性値:

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

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

repeat-y 背景画像が縦方向に繰り返し表示されます。

no-repeat 背景画像は 1 回だけ表示されます。

inherit は、background-repeat 属性の設定を親要素から継承することを指定します。

[推奨: css ビデオチュートリアル ]

例:

<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画像を繰り返さないように設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。