エンジニアのひよこ_level10

【毎日更新!】新卒3年目エンジニアブログです!

【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;
}

実際の例

https://codepen.io/klack710/pen/QPYzVg

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

transparentを使う

.bg_parent {
  background-color: transparent;
}

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

実際の例

https://codepen.io/klack710/pen/MRLZqV

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

.bg_blue {
  background-color: green;
}