CSSを使用してDIVに背景動画を追加する方法

2024-02-09 22:43 CSS 背景動画 div要素
  1. HTMLの準備: 最初に、DIV要素を含むHTMLコードを用意します。例えば、以下のような構造になっているとします。
<div class="video-container">
  <h1>背景動画が表示されるDIV</h1>
</div>
  1. CSSで背景動画を追加する: 次に、CSSを使用してDIV要素に背景動画を追加します。以下のステップに従って進めます。
/* DIV要素のスタイルを指定 */
.video-container {
  position: relative;
  width: 100%;
  height: 500px; /* 背景動画の表示領域の高さを指定 */
  overflow: hidden;
}
/* 背景動画のスタイルを指定 */
.video-container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background: url("背景動画のURL") no-repeat center center fixed; /* 背景動画のURLを指定 */
  background-size: cover;
  opacity: 0.5; /* 背景動画の透明度を調整 */
}

上記のCSSコードでは、DIV要素のクラス名を「video-container」としています。背景動画のURLをbackgroundプロパティに指定しています。また、opacityプロパティを調整することで、背景動画の透明度を設定することもできます。

  1. 追加のスタイルやコンテンツの調整: 必要に応じて、DIV要素やその他の要素のスタイルやコンテンツを調整してください。例えば、テキストの色やサイズ、余白などを変更することができます。