カスタムCSS使用例

背景画像の敷き詰めパターンやコントラスト、画像以外の背景色 についてはあまりにも沢山の機能があるので、カスタムCSSの設定にて対応 という形での対応となっています。

このため、表示について現状CastBackgroundが提供している機能以外の表示方法を提供する場合は、カスタムCSSを使ってください。

背景の変更

背景に関する変更を行う場合は、div#backgroundにスタイルを設定してください。

なお、div#backgroundのスタイルには、CSSが既に設定されています。index.cssの#backgroundの行を確認してください。

• CastBackground/index.css at master · side-beach-city/CastBackground

背景色の設定

#background{
  background-color: blue;
}

背景画像の配置方法変更

#background{
  background-position: center;
}

背景画像を薄くする

#background{
  opacity: 0.2;
}

表示中コンテンツの変更

表示中コンテンツはdiv#display配下に表示されます。CSSを設定する場合はここにスタイルを設定します。

コンテンツ表示時にフェードインを行う

参照：【コピペでOK】イメージ別！サイトをリッチに見せるためのCSSアニメーションまとめ【デモ・サンプルコード付き】 – 東京のホームページ制作 / WEB制作会社 BRISK

#display img{
 animation: fadeIn 0.7s cubic-bezier(0.33, 1, 0.68, 1) 1 forwards;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

表示するコンテンツをぼかす

#display{
 filter: blur(10px);
}