これまで、CSS の背景の属性には、color、image、repeat、attachment、position などいくつかありました。これらは CSS でよく使用されますが、CSS3 で追加された新しい属性は何でしょうか。下を見てください: ** 新しい CSS3 プロパティ: background-clip、background-origin、background-size 1.背景クリップ 背景のクリッピングプロパティは、指定された位置から描画を開始することです。 ** ** 2.背景の起源 background-origin プロパティは、背景画像が配置される領域を指定します。 ** 上記の 2 つのプロパティ値は、border-box、padding-box、content-box です (ボックス モデルを十分に理解しておくことをお勧めします。ここでは、これら 3 つのプロパティ値を見るだけで明らかになります)、または次の図を参照してください。 背景クリップは、対応する効果を得るために、これら3つの位置のいずれかでクリッピングを開始することと同じです。コードを参照してください。 <!DOCTYPE html> <html lang="ja"> <ヘッド> <メタ文字セット="UTF-8"> <title>タイトル</title> <スタイル> #div1 { 境界線: 20px 破線の青; パディング:40px; 背景: 赤; } #div2{ 境界線: 20px 破線の青; パディング:40px; 背景: 赤; 背景クリップ: パディングボックス; } #div3{ 境界線: 20px 破線の青; パディング:40px; 背景: 赤; 背景クリップ: コンテンツボックス; } </スタイル> </head> <本文> <p>背景クリッピングなし(境界ボックスが定義されていません):</p> <div id="div1"> <h2>ロレム・イプサム・ドロール</h2> <p>私はただそこに座っていて、とても不快に感じ、とても疲れていました。</p> </div> <p>背景クリップ: パディングボックス:</p> <div id="div2"> <h2>ロレム・イプサム・ドロール</h2> <p>私はただそこに座っていて、とても不快に感じ、とても疲れていました。</p> </div> <p>背景クリップ: コンテンツボックス:</p> <div id="div3"> <h2>ロレム・イプサム・ドロール</h2> <p>私はただそこに座っていて、とても不快に感じ、とても疲れていました。</p> </div> </本文> </html> 効果画像: そしてbackground-originは背景が表示される領域です。コードを参照してください <!DOCTYPE html> <html lang="ja"> <ヘッド> <メタ文字セット="UTF-8"> <title>タイトル</title> <スタイル> 分割 { border:1px 黒一色; パディング:35px; background-image:url('1 (5).jpg');/*画像が表示できない場合は、自分で変更する必要があります*/ 背景繰り返し:繰り返しなし; 背景の位置:左; } #div1 { background-origin: border-box;/*padding-boxを設定しても同じ効果がありますので、ご自身で試してみてください*/ } #div2 { 背景の原点: コンテンツボックス; } </スタイル> </head> <本文> <p>背景画像の境界ボックスの相対位置</p> <div id="div1"> <h2>ロレム・イプサム・ドロール</h2> <p>私はただそこに座っていて、とても不快に感じ、とても疲れていました。</p> </div> <p>背景画像はコンテンツ ボックスに対して相対的に配置されます</p> <div id="div2"> <h2>ロレム・イプサム・ドロール</h2> <p>私はただそこに座っていて、とても不快に感じ、とても疲れていました。</p> </div> </本文> </html> 効果: ** 3.背景サイズ background-size は背景画像のサイズを指定します。 CSS3 より前は、背景画像のサイズは画像の実際のサイズによって決まりました。 CSS3 の background-size プロパティを使用すると、さまざまな環境で背景画像のサイズを変更できます。サイズはピクセルまたはパーセンテージで指定できます。指定するサイズは、親要素の幅と高さに対するパーセンテージです。 属性値: ①.lengthは背景画像の高さと幅を設定します。最初の値は幅を設定し、2 番目の値は高さを設定します。値が 1 つだけ指定されている場合、2 番目の値は自動に設定されます。 ②.lpercentageは背景配置領域に対するパーセンテージを計算します。最初の値は幅を設定し、2 番目の値は高さを設定します。値が1つだけ指定されている場合、2番目の値は「自動」に設定されます。 ③.coverは画像のアスペクト比を維持し、背景配置領域を完全に覆う最小サイズに画像を拡大縮小します。 ④.contain は画像のアスペクト比を維持し、背景配置領域内に収まる最大サイズに画像を拡大縮小します。 要約する 上記は、私が皆さんに紹介した CSS3 の新しい背景プロパティです。皆さんのお役に立てれば幸いです。ご質問があれば、メッセージを残してください。すぐに返信いたします。また、123WORDPRESS.COM ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。この記事が役に立ったと思われた方は、ぜひ転載していただき、出典を明記してください。ありがとうございます! |
<<: MYSQL(電話番号、IDカード)データ非感応化の実装
nginx をリバース プロキシとして使用する場合、リクエストをそのまま次のサービスに転送するだけで...
MySQL 8.0.3がリリースされます。新機能を見てみましょうMySQL 8.0.3 は RC ...
まず、メモリ解放の例を見てみましょう。 <スクリプト言語="JavaScript&q...
コードをコピーコードは次のとおりです。 <!DOCTYPE html PUBLIC "...
目次1. セットとは何か2. セットコンストラクタ2.1) 配列2.2) 文字列2.3) 議論2.4...
序文WeChat アプレットを開発する際には、ユーザーの権限が必要なページを使用する必要があることが...
インデックス拡張: InnoDB は、プライマリ キー列をそのインデックスに追加することで、各セカン...
シェルスクリプト #!/bin/sh # 現在のディレクトリ CURRENT_DIR=$( cd &...
目次1. プロトタイプの関係2. プロトタイプチェーン3. 結論序文:前回の記事では、JavaScr...
サブクエリの分類返された結果セットによる分類サブクエリは、返される結果セットの違いに応じて、テーブル...
このチュートリアルは Windows システムにのみ適用されます。インストールしたがまだインストール...
目次概要オブジェクトにメソッドを定義するオブジェクトリテラルオブジェクトプロトタイプ動的コンテキスト...
この記事の例では、日付と時刻の選択を実装するための uniapp の具体的なコードを参考までに共有し...
この記事では、検証コードの効果を実現するためのJavaScriptの具体的なコードを参考までに共有し...
robots.txt の基本的な紹介Robots.txt はプレーンテキスト ファイルであり、Web...