どうも7noteです。透過時に背景が見えてしまう対策方法

背景色が入っている箇所の上にボタンを配置した時、ボタンがhoverで透過した際に背景色がうっすら見えてしまう対策方法について。

画像を使わずに、背景色で作成したボタンであれば次の方法で対策をすることができます。

（※ボタンが画像の場合はこちら）

ソース

index.html

<div class="box">
  <div class="btnA">透けちゃう。</div>
  <div class="btnB">透けないよ！</div>
</div>

style.css

.box {
  padding: 50px;         /* 適当な余白を確保 */
  background: #f36 25%,  /* 分かりやすいよう赤のストライプを指定 */
    #fff 25%,
    #fff 50%,
    #f36 50%,
    #f36 75%,
    #fff 75%,
    #fff
  );
  background-size: 40px 40px;  /* 適度な大きさに指定 */
}

.btnA,
.btnB {
  width: 150px;         /* 横幅を適当なサイズに指定 */
  text-align: center;   /* 文字を中央揃え */
  background: #eee;     /* 背景色をグレーに */
  padding: 10px 30px;   /* 内側の余白を指定 */
  margin: 10px;         /* ボタン同士が見やすいよう適度な余白 */
}

.btnA:hover {
  opacity: .9;          /* これだと透けてしまう */
}

.btnB:hover {
  background: #fafafa;  /* これなら透けない */
}

解説

手法は、hover時に透過するのをやめ、背景色を変更することです。
こうすることにより、当たり前ですが透過はしないので後ろが透けることはありません。
背景色が単色やグラデーションでも対応できますが、画像の時ではこの方法は使えないので注意。

まとめ

細かいところなのでチェック時に見落としがちですが、対応方法をしっていればなんてことないのでしっかり直しておきたいポイントです。

おそまつ！

~ Qiitaで毎日投稿中!! ~
【初心者向け】HTML・CSSのちょいテク詰め合わせ