soratomo0714 https://blog.hatena.ne.jp/soratomo0714/ Web関連あれこれ https://webkan.hateblo.jp/ HTML・CSS 先日こちらでopacityを使ってマウスオーバー時に要素を半透明にする方法をご紹介しました。こちらは、プロパティがopacityなので子要素である文字も含めて全体を半透明に設定されます。 ↑テキストも半透明 今回は、文字は透明にせずに背景のみ半透明にする方法について説明します。↓完成画像 こんな感じ ▼デモ http://jewelcafe.main.jp/hatena/d160219/index01.html ↓ちなみに、こんな事もできます。↑マウスオーバー時に背景のみカラー（グレー #333）フィルターをかけたような感じ▼デモ http://jewelcafe.main.jp/hatena… 190 <iframe src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Fwebkan.hateblo.jp%2Fentry%2F20160219%2Fp1" title="IE8以下でもrgbaを使って、マウスオーバー時に文字（子要素）はそのままで背景のみを透明にする - Web関連あれこれ" class="embed-card embed-blogcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 190px; max-width: 500px; margin: 10px 0px;"></iframe> https://cdn-ak.f.st-hatena.com/images/fotolife/s/soratomo0714/20160411/20160411175811.png Hatena Blog https://hatena.blog 2016-02-19 00:00:00 rich https://webkan.hateblo.jp/entry/20160219/p1 1.0 100%