色と背景の指定方法 — CSSカラーシステムを理解する

color: #2563eb;        /* 不透明 */
color: #2563eb80;      /* 透明度50%（8桁） */
color: #fff;           /* 3桁省略形 */

color: rgb(37, 99, 235);
color: rgba(37, 99, 235, 0.5); /* 透明度50% */
 
/* 新しい記法（スペース区切り、/で透明度） */
color: rgb(37 99 235 / 50%);

/* 色相(0-360) 彩度(%) 明度(%) */
color: hsl(220, 80%, 53%);
color: hsl(220 80% 53% / 0.5); /* 透明度付き */

.icon {
  color: #2563eb;
  border: 1px solid currentColor; /* colorと同じ値が使われる */
}

.card {
  background-color: #f8fafc;
  background-color: transparent; /* 透明 */
}

/* 線形グラデーション */
.hero {
  background-image: linear-gradient(135deg, #667eea, #764ba2);
}
 
/* 上から下（デフォルト） */
background-image: linear-gradient(#f0f9ff, #e0f2fe);
 
/* 放射状グラデーション */
background-image: radial-gradient(circle at center, #fff, #f1f5f9);

.hero {
  background-image: url('/images/hero.jpg');
  background-size: cover;       /* 領域をすべて覆う */
  background-position: center;  /* 中央基準 */
  background-repeat: no-repeat; /* 繰り返さない */
}

/* 要素全体の透明度（子要素も含む） */
.overlay { opacity: 0.5; }
 
/* 色の透明度だけ変えたい場合は rgba / hsl を使う */
.overlay { background-color: rgb(0 0 0 / 50%); }