ヘッダーの固定と背景の半透明化

公開日：2020-10-24 更新日：2020-10-24

1. 概要

ヘッダーを画面上部に固定にして、ヘッダーの背景を半透明にします。

ヘッダーの固定は、
position:fixed;
top:0px;
とします。

ヘッダーの半透明化は、
background-color: rgba(255, 255, 255, 0.8); /* 背景のみ半透明 */

または、

opacity:0.5; /* 文字も半透明 */
とします。

2. サンプル

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>HTML・CSS・JavaScript</title>
    <style>
      .header {
        position: fixed;
        top: 0px;
        width: 100%;
        height: 30px;
        border:1px solid #ccc;
        background-color: rgba(255, 255, 255, 0.8); /* 背景のみ半透明 */
        /* opacity:0.5; 文字も半透明 */
      }
    </style>
  </head>
  <body style="margin:0px; background-color:#fff; color:#000;">
    <div class="header">
      ヘッダー
    </div>
    <div style="background-color:#e0e0e0;">
      <br /><br />
      ああああああああああ<br />
      いいいいいいいいいい<br />
      うううううううううう<br />
      ええええええええええ<br />
      おおおおおおおおおお<br />
      かかかかかかかかかか<br />
      きききききききききき<br />
      くくくくくくくくくく<br />
      けけけけけけけけけけ<br />
      ここここここここここ<br />
      ささささささささささ<br />
      しししししししししし<br />
      すすすすすすすすすす<br />
      せせせせせせせせせせ<br />
      そそそそそそそそそそ<br />
    </div>
  </body>
</html>

実行結果：

Tag

New Article