【CSS】要素の色を透明にする(親要素と同じ色にする)【561日目】

一部の色を透明にしたい

CSSで、一部は指定の色、一部は透明(親要素の色)にしたい。

<div class="bg_blue">
  <ul>
    <li class="bg_red">赤</li>
    <li class="bg_parent">親の色</li>
  </ul>
</div>

.bg_blue {
  background-color: blue;
}

.bg_red {
  background-color: red;
}

.bg_parent {
  background-color: blue;
}

こう書くと、仮にbg_blueの色が変わったときに、bg_parentの色も変えないとおかしなことに・・・

.bg_parent {
  background-color: transparent;
}

これで、親の色に変わる。

仮に、以下のように変更しても動くので、試してみてください！

.bg_blue {
  background-color: green;
}