【CSS】background-colorを透過する時の備忘録（IE11対策）

<div class="one_area">
  <div class="one_box">
    <p>ここは墨色指定</p>
  </div>
  <div class="one_box">
    <p>ここは透過指定<br><br>※ IE11で確認したところ、透過ではなく色がついていた。原因は、backgroundの色指定がrgbになっていた。<br><br>この場合の対応方法<br>rgb → rgba</p>
  </div>
  <div class="one_box">
    <p>ここは墨色指定</p>
  </div>
</div>

/* ---------- 01 真ん中の箱を透過 ---------- */
.one_area {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.one_area .one_box {
  width: 33.333%;
  background: #2b2a27;
  color: #fff;
}
.one_area .one_box:nth-child(2) {
  background: rgba(255, 255, 255, 0);/*IE11*/
  background: rgb(255 255 255 / 0%);
  color: #2b2a27;
}
.one_area .one_box p {
  text-align: center;
  padding: 30px 15px;
  margin: 0;
  font-size: 14px;
}