product icon
ドキュメント
言語を選択
EnglishEspañolPortuguês do BrasilDeutschFrançaisעִבְרִית日本語ItalianoNederlandsРусскийTürkçeBahasa Indonesia简体中文繁體中文한국어العربيةSvenska

背景の設定

Last updated on 11/1/2024@mrbirddev

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

静的な写真の背景

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

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

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ドキュメントを確認してください。

背景画像にフィルターを設定する

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

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

filter: grayscale(0.5)

filter: brightness(0.5)

filter: blur(5px)

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

繰り返し可能なパターン背景

これはPage Slide Containerに適用されます。高度な背景をクリックしてパターンを選択できます。

  1. パターンタイプを選択します。
  2. 次に、パターンのオプションをカスタマイズできます。また、Insipre meボタンをクリックして、どのようなランダムなパターンが生成されるか試すことができます。

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

ビデオ背景

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

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

背景のアニメーション化

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

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

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

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

Loading...