HTML および CSS の背景関連の属性-htmlチュートリアル-php.cn

ホームページ

ウェブフロントエンド

htmlチュートリアル

HTML および CSS の背景関連の属性

php中世界最好的语言

Mar 13, 2018 am 11:46 AM

css html

今回は HTML と CSS の背景関連属性についてご紹介します。 HTML と CSS で背景関連属性を使用する際の注意点について、実際の事例を見てみましょう。

1. 背景サイズ属性

1. 背景サイズ属性とは
背景サイズ属性は、背景画像のサイズを設定するために特別に使用されます

:xxxx ;

value :

1.具体像素 >> background-size:200px 100px;
2.百分比 >> background-size:100% 80%;
3.宽度等比拉伸 >> background-size:auto 100px;
4.高度等比拉伸 >> background-size:100px auto;
5.cover >> background-size:cover;

ログイン後にコピー

5.1 画像を比例的に拡大する必要があることをシステムに伝えます

5.2 幅と高さが両方とも満たされるまで画像を拡大する必要があることをシステムに伝えます。要素

6. contains >>background-size:contain;

6.1 画像を比例的に拡大する必要があることをシステムに通知します

6.2 画像を幅まで拡大する必要があることをシステムに通知します。または高さが要素で埋められます ( は片側のみが完全に埋められることを保証します)

背景画像配置領域属性

背景-origin

: デフォルトで背景画像がどの領域から表示されるかをシステムに指示します。以下はパディング領域から表示されます。

値:

1.<a>padding-box</a>:默认值 >>background-origin: padding-box; 告诉系统背景图片从什么区域开始显示,默认情况下就是从padding区域开始显示;
 2.<a>border-box</a> >>  background-origin:border-box; 从border位置开始
 3.<a>content-box</a> >>  background-origin:content-box;从content位置开始

ログイン後にコピー

<html lang="en"> <head>     <meta charset="UTF-8">     <title>113-背景图片定位区域属性</title>     <style>         *{             margin: 0;             padding: 0;         }         ul li{             list-style: none;             float: left;             width: 100px;             height: 100px;             text-align: center;             line-height: 100px;             border: 20px dashed #000;             padding: 50px;             margin-left: 20px;             background: url("images/dog.jpg") no-repeat;         }         ul li:nth-child(2){             /*             告诉系统背景图片从什么区域开始显示,             默认情况下就是从padding区域开始显示             */             background-origin: padding-box;         }         ul li:nth-child(3){             background-origin:border-box;         }         ul li:nth-child(4){             background-origin:content-box;         }     </style> </head> <body> <ul>     <li>默认</li>     <li>padding</li>     <li>border</li>     <li>content</li> </ul> </body> </html>

ログイン後にコピー

背景画像配置領域属性

3背景描画領域属性

<a>background-clip:xxx;</a>背景绘制区域属性是专门用于指定从哪个区域开始绘制背景的, 默认情况下会从border区域开始绘制背景
<html lang="en"> <head>     <meta charset="UTF-8">     <title>114-背景绘制区域属性</title>     <style>         *{             margin: 0;             padding: 0;         }         ul li{             list-style: none;             float: left;             width: 100px;             height: 100px;             text-align: center;             line-height: 100px;             border: 20px dashed #000;             padding: 50px;             margin-left: 20px;             background: red url("images/dog.jpg") no-repeat;         }         ul li:nth-child(2){             /*             背景绘制区域属性是专门用于指定从哪个区域开始绘制背景的, 默认情况下会从border区域开始绘制背景             */             background-clip: padding-box;         }         ul li:nth-child(3){             background-clip: border-box;         }         ul li:nth-child(4){             background-clip: content-box;         }     </style> </head> <body> <ul>     <li>默认</li>     <li>padding</li>     <li>border</li>     <li>content</li> </ul> </body> </html>

ログイン後にコピー

背景描画領域属性 (赤色が描画領域)

4. 複数の背景画像

最初に追加された背景画像は、後で追加された背景画像を覆います

要素c3以降に複数の背景画像を設定できます

複数の背景画像はカンマで区切ることができます

background: url("images/animal1.png") no-repeat left top,url("images/animal2.png") no-repeat right top,url("images/animal3.png") no-repeat left bottom;

ログイン後にコピー

注:

最初に追加した背景画像は後から追加した背景画像を覆います

background: url("images/animal1.png") no-repeat left top,url("images/animal2.png") no-repeat right top,url("images/animal3.png") no-repeat left bottom,url("images/animal4.png") no-repeat right bottom,url("images/animal5.png") no-repeat center center;

ログイン後にコピー

区切って書くことをお勧めします複数の背景を作成する場合

background-image: url("images/animal1.png"),url("images/animal2.png"),url("images/animal3.png"); background-repeat: no-repeat, no-repeat, no-repeat; background-position: left top, right top, left bottom;

ログイン後にコピー

完全なコードは次のとおりです:

115-多重背景图片

ログイン後にコピー

複数の背景画像

four .複数の背景画像の連絡先

<a>先添加的背景图片会盖住后添加的背景图片</a>
<html lang="en"> <head>     <meta charset="UTF-8">     <title>116-多重背景图片-练习</title>     <style>         *{             margin: 0;             padding: 0;         }         p{             width: 600px;             height: 190px;             border: 1px solid #000;             margin: 100px auto;                       background-image: url("images/bg-plane.png"),url("images/bg-sun.png"), url(images/bg-clouds.png);             background-repeat: no-repeat, no-repeat, no-repeat;             background-size: 50px 50px, 50px 50px, auto auto;          background-position: 50px 150px, 400px 50px, 0px 0px;             animation: move 10s linear 0s infinite normal;         }         @keyframes move {             from{                 background-position: 50px 150px, 400px 50px, 0px 0px;             }             to{                 background-position: 500px -150px, 400px 50px, -600px 0px;             }         }     </style> </head> <body> <p></p> </body> </html>

ログイン後にコピー

この記事の事例を読んだ後は、この方法を習得したと思います。情報については、PHP 中国語 Web サイトの他の関連記事にも注目してください。

推奨読書:

HTMLとCSSの2D変換モジュール

HTMLとCSSの遷移モジュール

H5での配置

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

このウェブサイトの声明

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

ホットAIツール

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

ホットトピック

Java チュートリアル

1662

CakePHP チュートリアル

1419

Laravel チュートリアル

1311

PHP チュートリアル

1262

C# チュートリアル

1234

Related knowledge

VueでBootstrapの使用方法 Apr 07, 2025 pm 11:33 PM

vue.jsでBootstrapを使用すると、5つのステップに分かれています。ブートストラップをインストールします。 main.jsにブートストラップをインポートしますブートストラップコンポーネントをテンプレートで直接使用します。オプション：カスタムスタイル。オプション：プラグインを使用します。

HTML、CSS、およびJavaScriptの理解：初心者向けガイド Apr 12, 2025 am 12:02 AM

webdevelopmentReliesOnhtml、css、andjavascript：1）htmlStructuresContent、2）cssStylesit、および3）Javascriptaddsinteractivity、形成、

HTML、CSS、およびJavaScriptの役割：コアの責任 Apr 08, 2025 pm 07:05 PM

HTMLはWeb構造を定義し、CSSはスタイルとレイアウトを担当し、JavaScriptは動的な相互作用を提供します。 3人はWeb開発で職務を遂行し、共同でカラフルなWebサイトを構築します。

HTMLにおけるReactの役割：ユーザーエクスペリエンスの向上 Apr 09, 2025 am 12:11 AM

ReactはJSXとHTMLを組み合わせてユーザーエクスペリエンスを向上させます。 1）JSXはHTMLを埋め込み、開発をより直感的にします。 2）仮想DOMメカニズムは、パフォーマンスを最適化し、DOM操作を削減します。 3）保守性を向上させるコンポーネントベースの管理UI。 4）国家管理とイベント処理は、インタラクティブ性を高めます。

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

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

ブートストラップにスプリットラインを書く方法 Apr 07, 2025 pm 03:12 PM

ブートストラップスプリットラインを作成するには2つの方法があります。タグを使用して、水平方向のスプリットラインを作成します。 CSS Borderプロパティを使用して、カスタムスタイルのスプリットラインを作成します。

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

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