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

体 {
  背景画像: 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: カバー;
}

体 {
  背景画像: 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: 繰り返し、繰り返しなし;
  背景サイズ: 含む、カバーする;
}

<本文>
  <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度、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");
  背景サイズ: カバー;
  背景繰り返し: 繰り返しなし;
  背景添付: 固定;
  背景の位置: 中央
}

<本文>
<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');
    背景繰り返し: 繰り返しなし;
    背景の位置: 中央;
    背景添付: 固定;
    背景サイズ: カバー;
  }
}

<本文>
  <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: テキスト;
  色: 透明;
}