背景リピート属性の使い方-CSSチュートリアル-php.cn

repeat设置背景图片向垂直和水平方向重复

no-repeat设置背景图片不重复

repeat-x设置背景图片向水平方向重复

repeat-y设置背景图片向垂直方向重复

ホームページ

ウェブフロントエンド

CSSチュートリアル

背景リピート属性の使い方

青灯夜游

Feb 18, 2019 pm 02:32 PM

css

CSS の background-repeat プロパティは、背景画像を並べて表示する方法を設定するために使用されます。 background-repeat:repeat-x は、水平方向の位置のみで背景画像を繰り返すことを意味し、background-repeat:repeat-y は、垂直方向の位置のみで背景画像を繰り返すことを意味します。

背景リピート属性の使い方

#CSS 背景繰り返し属性

機能: 背景画像を繰り返すかどうか、どのように繰り返すかを設定します。

基本構文:

background-repeat:repeat|repeat-x|repeat-y|no-repeat;

repeat: デフォルト値、背景画像は垂直になります。水平方向に繰り返します。

repeat-x: 背景画像のみを水平方向に繰り返します。

repeat-y: 垂直方向の位置のみで背景画像が繰り返されます。

no-repeat: 背景画像は繰り返されません。

説明:background-repeat 属性は、画像のタイリングモードを定義します。元の画像から開始して繰り返します。この画像は、background-image で定義され、background-position の値に従って配置されます。

#CSS 背景リピート属性の使用例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title>
<style>
.demo1{
	width: 400px;
	height: 150px;
	border: 1px solid red;
	background-image:url(&#39;https://img.php.cn/upload/article/000/000/024/5c6a4428ea867709.png&#39;);
    background-repeat:repeat;
}
.demo2{
	width: 400px;
	height: 100px;
	border: 1px solid red;
	background-image:url(&#39;https://img.php.cn/upload/article/000/000/024/5c6a4428ea867709.png&#39;);
    background-repeat:no-repeat;
}
.demo3{
	width: 400px;
	height: 150px;
	border: 1px solid red;
	background-image:url(&#39;https://img.php.cn/upload/article/000/000/024/5c6a4428ea867709.png&#39;);
    background-repeat:repeat-x;
}
.demo4{
	width: 400px;
	height: 400px;
	border: 1px solid red;
	background-image:url(&#39;https://img.php.cn/upload/article/000/000/024/5c6a4428ea867709.png&#39;);
    background-repeat:repeat-y;
}
</style>
</head>

<body>
<h3 id="repeat设置背景图片向垂直和水平方向重复">repeat设置背景图片向垂直和水平方向重复</h3>
<div class="demo1"></div>
<h3 id="no-repeat设置背景图片不重复">no-repeat设置背景图片不重复</h3>
<div class="demo2"></div>
<h3 id="repeat-x设置背景图片向水平方向重复">repeat-x设置背景图片向水平方向重复</h3>
<div class="demo3"></div>
<h3 id="repeat-y设置背景图片向垂直方向重复">repeat-y设置背景图片向垂直方向重复</h3>
<div class="demo4"></div>
</body>
</html>

ログイン後にコピー

レンダリング:

背景リピート属性の使い方

##以上がこの記事の全内容です、皆様の学習のお役に立てれば幸いです。

以上が背景リピート属性の使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

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

ホットAIツール

ホットツール

ホットトピック

Gmailメールのログイン入り口はどこですか？

7461

CakePHP チュートリアル

1376

Steamのアカウント名の形式は何ですか

Win11 Activation Key Permanent

NYTの接続はヒントと回答です

Related knowledge

ブートストラップボタンの使用方法 Apr 07, 2025 pm 03:09 PM

ブートストラップボタンの使用方法は？ブートストラップCSSを導入してボタン要素を作成し、ブートストラップボタンクラスを追加してボタンテキストを追加します

ブートストラップに写真を挿入する方法 Apr 07, 2025 pm 03:30 PM

ブートストラップに画像を挿入する方法はいくつかあります。HTMLIMGタグを使用して、画像を直接挿入します。ブートストラップ画像コンポーネントを使用すると、レスポンシブ画像とより多くのスタイルを提供できます。画像サイズを設定し、IMG-Fluidクラスを使用して画像を適応可能にします。 IMGボーダークラスを使用して、境界線を設定します。丸い角を設定し、IMGラウンドクラスを使用します。影を設定し、影のクラスを使用します。 CSSスタイルを使用して、画像をサイズ変更して配置します。背景画像を使用して、背景イメージCSSプロパティを使用します。

ブートストラップのフレームワークをセットアップする方法 Apr 07, 2025 pm 03:27 PM

Bootstrapフレームワークをセットアップするには、次の手順に従う必要があります。1。CDNを介してブートストラップファイルを参照してください。 2。独自のサーバーでファイルをダウンロードしてホストします。 3。HTMLにブートストラップファイルを含めます。 4.必要に応じてSASS/LESSをコンパイルします。 5。カスタムファイルをインポートします（オプション）。セットアップが完了したら、Bootstrapのグリッドシステム、コンポーネント、スタイルを使用して、レスポンシブWebサイトとアプリケーションを作成できます。

ブートストラップのサイズを変更する方法 Apr 07, 2025 pm 03:18 PM

Bootstrapの要素のサイズを調整するには、次のものを含むDimensionクラスを使用できます。

ブートストラップの日付を表示する方法 Apr 07, 2025 pm 03:03 PM

回答：ブートストラップの日付ピッカーコンポーネントを使用して、ページで日付を表示できます。手順：ブートストラップフレームワークを紹介します。 HTMLで日付セレクター入力ボックスを作成します。ブートストラップは、セレクターにスタイルを自動的に追加します。 JavaScriptを使用して、選択した日付を取得します。

ブートストラップの日付を確認する方法 Apr 07, 2025 pm 03:06 PM

ブートストラップの日付を確認するには、次の手順に従ってください。必要なスクリプトとスタイルを紹介します。日付セレクターコンポーネントを初期化します。 Data-BV-Date属性を設定して、検証を有効にします。検証ルール（日付形式、エラーメッセージなどなど）を構成します。ブートストラップ検証フレームワークを統合し、フォームが送信されたときに日付入力を自動的に検証します。

ブートストラップにファイルをアップロードする方法 Apr 07, 2025 pm 01:09 PM

ファイルアップロード機能は、Bootstrapを介して実装できます。手順は次のとおりです。BootstrapCSSおよびJavaScriptファイルを紹介します。ファイル入力フィールドを作成します。ファイルアップロードボタンを作成します。ファイルのアップロードを処理します（FormDataを使用してデータを収集し、サーバーに送信します）。カスタムスタイル（オプション）。