background-image は、おそらくすべてのフロントエンド開発者がキャリアの中で少なくとも数回は使用したことがある CSS プロパティの 1 つです。背景画像については特に変わったことはないとほとんどの人が思っていますが。 。 。 。 。 。 1. 背景画像をビューポートにぴったり合わせる方法 体 { 背景画像: url('https://images.unsplash.com/photo-1573480813647-552e9b7b5394?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2253&q=80'); 背景繰り返し: 繰り返しなし; 背景の位置: 中央; 背景添付: 固定; 背景サイズ: カバー; -webkit-background-size: カバー; -moz-background-size: カバー; -o-background-size: カバー; } background-attachment は、背景画像を固定するか、ページの残りの部分と一緒にスクロールするかを設定します。 2. CSSで複数の背景画像を使用する方法 体 { 背景画像: url(https://image.flaticon.com/icons/svg/748/748122.svg), url(https://images.unsplash.com/photo-1478719059408-592965723cbc?ixlib=rb-1.2.1&auto=format&fit=crop&w=2212&q=80); 背景の位置: 中央、上; background-repeat: 繰り返し、繰り返しなし; 背景サイズ: 含む、カバーする; } 3. 三角形の背景画像を作成する方法 昼と夜、冬と夏など、まったく異なるオプションを表示したい場合。 これは、ビューポート全体に対して 2 つの div を作成することによって行われます。次に、両方に背景画像を追加する必要があります。次に、三角形を作成するために、2 番目の div に clip-path プロパティが必要です。 <本文> <div class="day"></div> <div class="夜"></div> </本文> 体 { マージン: 0; パディング: 0; } div { 位置: 絶対; 高さ:100vh; 幅:100vw; } 。日 { 背景画像: url("https://images.unsplash.com/photo-1477959858617-67f85cf4f1df?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2613&q=80"); 背景サイズ: カバー; 背景繰り返し: 繰り返しなし; } 。夜 { 背景画像: url("https://images.unsplash.com/photo-1493540447904-49763eecf55f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80"); 背景サイズ: カバー; 背景繰り返し: 繰り返しなし; クリップパス: ポリゴン(100vw 0, 0% 0vh, 100vw 100vh); } 4. 背景画像にグラデーションオーバーレイを追加するにはどうすればよいですか? 画像にテキストを入れたいが背景が明るすぎてテキストがはっきり見えない場合に便利です。また、画像自体を改善することもできます。 体 { 背景画像: 線形グラデーション(4度、rgba(38,8,31,0.75) 30%、rgba(213,49,127,0.3) 45%、rgba(232,120,12,0.3) 100%)、 url("https://images.unsplash.com/photo-1503803548695-c2a7b4a5b875?ixlib=rb-1.2.1&auto=format&fit=crop&w=2250&q=80"); 背景サイズ: カバー; 背景繰り返し: 繰り返しなし; 背景添付: 固定; 背景の位置: 中央 } 5. グリッド背景画像を作成する方法 CSS グリッドと CSS background-image を使用して素敵な背景画像を作成します。 <本文> <div class="コンテナ"> <div class="item_img"></div> <div class="item"></div> <div class="item_img"></div> <div class="item"></div> <div class="item"></div> <div class="item_img"></div> <div class="item"></div> <div class="item_img"></div> <div class="item"></div> <div class="item"></div> <div class="item_img"></div> <div class="item"></div> <div class="item_img"></div> <div class="item"></div> <div class="item_img"></div> <div class="item"></div> </div> </本文> 体 { マージン: 0; パディング: 0; } 。容器 { 位置: 絶対; 幅: 100%; 高さ: 100%; 背景:黒; 表示: グリッド; グリッドテンプレートの列: 25fr 30fr 40fr 15fr; グリッドテンプレートの行: 20fr 45fr 5fr 30fr; グリッドギャップ: 20px; .item_img { 背景画像: url('https://images.unsplash.com/photo-1499856871958-5b9627545d1a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2207&q=80'); 背景繰り返し: 繰り返しなし; 背景の位置: 中央; 背景添付: 固定; 背景サイズ: カバー; } } 6. 背景画像をテキストの色として設定する方法 背景画像を背景クリップと組み合わせて使用することで、テキストに背景画像の美しい効果を加えることができます。これは特定の状況で非常に便利です。特に、単色ほど退屈ではない大きなテキスト タイトルを作成したい場合に便利です。 <本文> <h1>こんにちは世界!</h1> </本文> 体 { ディスプレイ: フレックス; アイテムの位置を中央揃えにします。 コンテンツの中央揃え: 中央; flex-direction: 列; 幅: 100%; テキスト配置: 中央; 最小高さ: 100vh; フォントサイズ: 120px; } h1 { 背景画像: url("https://images.unsplash.com/photo-1462275646964-a0e3386b89fa?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2600&q=80"); 背景クリップ: テキスト; -webkit-background-clip: テキスト; 色: 透明; } 要約する CSS 背景画像設定に関する 6 つの興味深いヒントについての記事はこれで終わりです。CSS 背景画像に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 |
<<: MySQL の垂直テーブルを水平テーブルに変換する方法と最適化のチュートリアル
>>: Vue+Element+Springboot画像アップロードの実装例
ミニプログラムはユーザーの個人情報を収集してアップロードしましたが、拒否されました。こんにちは、ミニ...
最近、ウェブサイトを https アクセスに変換したいのですが、すべて完了した後、Baidu Web...
序文NFS (Network File System) は、ネットワーク ファイル システムを意味し...
目次1 SSHとは何か2 SSHパスワードフリーログインを設定する2.1 必要なソフトウェアのインス...
1 問題の説明この記事では、確立された複合インデックスをソートし、レコード内の非インデックス フィー...
グローバルオブジェクトすべてのモジュールは呼び出すことができますglobal: ブラウザの wind...
Xhtml には、あまり使用されないが非常に便利なタグが多数あります。半分の労力で 2 倍の結果を達...
Mac を返却して以来、元のラップトップは使用されていません。このラップトップの構成は非常に良好で...
dockerfile またはコンテナ内で yum を実行すると、エラーが報告され、ソースが見つかりま...
DTD はマークアップの文法規則のセットです。これは XML 1.0 仕様の一部であり、HTML フ...
この半月、期末試験の準備にかなりのエネルギーを費やしました。今日はしっかり復習するべきだったのですが...
HTTP圧縮とは場合によっては、比較的大きなメッセージ データがクライアントとサーバー間で送信され、...
本日、MySQLの圧縮版をインストールする際に問題が発生しました。サービスが起動できず、2、3時間苦...
ストアドプロシージャとは簡単に言えば、これは強力で、JAVA 言語のメソッドに似た比較的複雑な論理関...
データベース操作を学び始めたばかりです。今日、データを保存していたところ、エラーが発生していることに...