背景の設定

Last updated on 11/1/2024@mrbirddev

slidde.coで背景を設定するいくつかの方法を紹介します。CSSの背景はslidde.coの任意の要素に設定できます。

CSS背景

これは最も一般的な使用例です。

背景画像が読み込まれている間や、背景画像の一部が透明な場合のフォールバックカラー：

backgroundColor: #000

画像のURLはslidde.coを使用してアップロードできます。ここではCSSグラデーションも使用でき、slidde.coはコード不要でいくつかのグラデーションプリセットを提供しています：

backgroundImage: url("your_image_url")

ほとんどの場合、「cover」を使用して背景がすべての画像をカバーするようにすることができます：

backgroundSize: cover

backgroundSize: "cover"が画像の重要な部分を隠してしまう場合は、位置を調整できます：

backgroundPosition: 50% 10px

背景画像が繰り返し可能なパターンでない場合は、これをno-repeatに設定できます：

backgroundRepeat: no-repeat

ページをスクロールしたときに背景画像が動くかどうかを制御します。通常、スクロールに追従しない静的な写真が必要です。なぜなら、それがページをカバーするからです：

backgroundAttachment: fixed

より詳細な情報はMDNドキュメントを確認してください。

背景のアニメーション

CSSのbackgroundImageを使用している場合、backgroundPositionを簡単にアニメーション化できます。こちらの例をご覧ください。

duration: 1500ms
delay: 800ms
easing: easeOutCubic
0% { backgroundPositionY: -36vw; }
100% { backgroundPositionY: 0; }

他のCSSプロパティもアニメーション化できます。

ただし、CSSのopacityのようなものをアニメーション化する必要がある場合、直接アニメーション化することはできません。opacityは要素全体に適用されるためです。その代わりに、高度な背景でimageElementを使用し、targetを&>*:first-childに設定して、画像要素のみに適用する必要があります。

高度な背景

これはPage、Slide、Containerに適用されます。高度な背景をクリックし、次のオプションを選択できます。

画像要素の背景 - 背景画像にフィルターを設定する

高度な背景をクリックし、imageElementを選択します。これにより、コンテナ内に最初の要素として別のHTML <div><img /></div> 要素が作成されます。

その後、フィルターのようなCSSプロパティを適用できます。例えば、背景画像と前景テキストの間により多くのコントラストを作り、読みやすさを向上させる3つの方法があります。

filter: grayscale(0.5)

filter: brightness(0.5)

filter: blur(5px)

より詳細な紹介については、MDNドキュメントを確認してください。

アニメーション背景

高度な背景をクリックし、animatedを選択します。

さまざまなアニメーション背景のプリセットから選ぶことができます。

通常、アニメーション背景のbackgroundColorやbackgroundImageを設定できます。一部のプリセットには、色、間隔、またはアニメーションの持続時間を設定できるCSS変数もあります。

繰り返しパターンの背景

高度な背景をクリックし、patternを選択します。

パターンタイプを選択します。
その後、パターンのオプションをカスタマイズできます。また、Insipre meボタンをクリックして、ランダムなパターンを試すこともできます。

これにより、内部に別のHTML <div><svg width="100%" height="100%" .../></div> 要素が作成されます。したがって、opacity、filter、さらにはbackgroundImageを調整して、SVG親要素にグラデーション背景を追加することもできます。また、SVGをアニメーション化することもできます。

YouTubeビデオの背景

高度な背景をクリックし、youtubeElementを選択します。これにより、YouTubeビデオを埋め込むための別のHTML <div><iframe /></div> 要素が内部に作成されます。そこにYouTubeのURLリンクを貼り付けることができます。

現在、YouTube要素のみが許可されています。これは、独自のビデオをホスティングするよりも優れたストリーミング最適化を提供するためです。カスタムビデオのアップロードが必要な場合は、ナビゲーションバーのフィードバックボタンを通じてお知らせください。