これまで、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カード)データ非感応化の実装
主な機能は次のとおりです。製品情報を追加する製品情報を変更する単一の製品を削除する複数の製品を削除す...
序文Linux では、スワップ パーティションとスワップ ファイルの 2 種類のスワップ領域を作成で...
MACでMySQLの初期パスワードを忘れた問題を解決する方法を参考までに共有します。具体的な内容は次...
この記事では、二次リンク効果を実現するためのReact+tsの具体的なコードを参考までに共有します。...
CenOS6.7 は MySQL8.0.22 (推奨コレクション) をインストールします1. MyS...
公式チュートリアルに従って、インストール パッケージをダウンロードし、[インストール] をクリックし...
実際のプロジェクトでは、緊急事態を防ぐためにデータベースを頻繁にバックアップする必要があります。しば...
はじめに: MySQL を使用してテーブルを作成する場合、通常は自動インクリメント フィールド (A...
脆弱性の説明Apache Flink は、分散ストリームおよびバッチ データ処理用のオープン ソース...
この要件を受け取ったとき、Baidu は、CSS リンクの置き換え、className の変更、le...
Linux で Go 環境を構築するのは非常に簡単です。 1. go1.2.1.linux-386....
この記事では、参考までに、ビデオアップロード機能を実現するためのVueの具体的なコードを紹介します。...
tomcatの設定1. 実行構成をクリック 2. tomcat localを選択 3. tomcat...
目次1. トリガーソリューション2. パーティションテーブルソリューション3. 一般的な表領域ソリュ...
目次横棒グラフデータとスタイルを動的に更新するeChartsの幅と高さの適応の問題を解決する縦棒グラ...