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

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

画像で作成したボタンの場合、2つの方法で対応することができます。

※ボタンをCSSのみ（背景色）で作成した場合はこちら

通常時

ただ透明にしたら後ろが透ける

対策すると・・・

①画像の背景に白を入れておく

index.html

<div class="box">
  <div class="btn"><a href="#"><img src="sample.png" alt=""></a></div>
</div>

style.css

.box {
  padding: 50px;         /* 適当な余白を確保 */
  background-size: auto auto;  /* 分かりやすいよう赤のストライプを指定 */
  background-color: rgba(255, 255, 255, 1);
  background-image: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(255, 1, 1, 1) 10px, rgba(255, 1, 1, 1) 20px );
}

.btn {
  width: 150px;         /* 横幅を適当なサイズに指定 */
  margin: 10px;         /* ボタン同士が見やすいよう適度な余白 */
  background: #fff;     /* 背景に白を挿入 */
}

.btn a:hover {
  opacity: .8;          /* 透過させる */
}

解説

透過させるのはaタグだけ透過させ、親要素のdivは背景色として白がはいっているのでその後ろのストライプは透けずに済むという方法です。
親子構造になって、子要素だけが透過しているのがポイント。

ただし、CSSで再現可能な形（四角や楕円系）でなければ白い枠がはみ出たり、透過を綺麗に防ぐことができないので万能というわけではありません。

②背景画像に指定して、hover時だけ画像を変更する

index.html

<div class="box">
  <div class="btn"><a href="#"></a></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;  /* 適度な大きさに指定 */
}

.btn {
  width: 150px;         /* 横幅を適当なサイズに指定 */
  height: 50px;         /* 縦幅を適当なサイズに指定 */
  margin: 10px;         /* ボタン同士が見やすいよう適度な余白 */
  background: #fff;     /* 背景に白を挿入 */
}

.btn a {
  display: block;
  background-image: url("sample.png");
  background-repeat: no-repeat;
  background-size: 100% auto;
}

.btn a:hover {
  background-image: url("sample-hover.png");
}