CSS 背景画像を設定するための 6 つの興味深いヒント

CSS 背景画像を設定するための 6 つの興味深いヒント

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);
}

clip-pathプロパティは、要素のどの部分を表示するかを設定するクリッピング領域を作成します。領域内の部分が表示され、領域外の部分は非表示になります。

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画像アップロードの実装例

推薦する

Linux の cut コマンドの説明

Linux や Unix の cut コマンドは、ファイルの各行から一部を切り取って標準出力に出力す...

MySQL 外部キー制約の無効化と有効化コマンド

MySQL 外部キー制約の無効化と有効化: MySQL 外部キー制約が有効になっているかどうかは、グ...

CSSの2つの特別な値は、カスケードの継承と初期メソッドを制御するために使用されます。

カスケードを制御するために CSS の任意のプロパティに割り当てることができる特別な値が 2 つあり...

Jenkins統合Dockerプラグインの問題を解決するいくつかの方法

目次背景質問1エラー 2エラー 3エラー4要約する背景テスト環境では、docker プラグインを統合...

MySQL InnoDB MRR 最適化ガイド

序文MRR は Multi-Range Read の略で、ランダム ディスク アクセスを削減し、ラン...

Spring Boot Docker パッケージング ツールの概要

目次スプリングブートDocker spring-boot-maven-プラグインSpotify Ma...

MySQL サービス 1067 エラーの解決策: mysql 実行可能ファイルのパスを変更する

今日、MySQLサービス1067エラー問題に遭遇しました。システムアカウントを使用するように設定して...

要素内の TimePicker は時間の一部を無効にします (分単位で無効)

プロジェクトの要件は、日付と時刻を選択し、現在の時刻以降の時刻のみを選択し、最小レベルを分単位で無効...

iOS スタイルの選択ボックスの開閉機能を実装するための純粋な CSS

1 効果デモアドレス: https://www.albertyy.com/2020/7/check...

純粋な CSS を使用して脈動するローダー効果のソースコードを作成する

効果プレビュー右側の「クリックしてプレビュー」ボタンを押すと現在のページでプレビューが表示され、リン...

Linux システム AutoFs 自動マウント サービスのインストールと構成

目次序文1. サービスプログラムをインストールする2. メイン設定ファイルを書く3. サブ構成ファイ...

openlayers6のマップオーバーレイの詳細な説明

1. オーバーレイの概要オーバーレイとは、その名の通り、別の形で地図上に表示される、覆うことを指しま...

Linuxで大きなファイルを素早くコピーする方法

データをコピーリモートでデータをコピーする場合、通常は rsync コマンドを使用しますが、小さなフ...

完璧なアロエベラジェルを選ぶには?完璧なアロエベラジェルの本物と偽物の見分け方

最新のパーフェクト アロエ ベラ ジェルのパッケージ ボックスには、赤いフォントで完璧な英語の文字が...