CSS opacityが効かない条件と回避方法

opacityは要素を透明、半透明にするCSSプロパティです。

しかし、ある条件によりopacityが効かなくなることがあります。

CSS opacityが効かない条件と回避方法を解説します。

opacityが効かない条件

opacityが効かないhtml例

<style>
    a{
        opacity: .5;
    }
</style>

<a href="#">
    <div>
        <img src="https://csshtml.work/wp-content/uploads/1.jpg">
    </div>
</a>

下記をchromeで見てみてください。透明になっていないかと思います。

CSS opacityが効かない条件は下記すべてを満たしたときです。

逆にいうと解決方法は上記の条件を崩せばいいのです。

手っ取り早いのはaタグに「display:block」を指定してしまうことでしょう。

<style>
    a{
        opacity: .5;
        /*コレ*/display: block;
    }
</style>

<a href="#">
    <div>
        <img src="https://csshtml.work/wp-content/uploads/1.jpg" alt="">
    </div>
</a>

下記をchromeで見てみてください。透明になったかと思います。

その他の原因

スペルミスをしていたりCSSの優先度が負けているとCSSが効かない場合があります。下記を参考に見直してみてください。

【まとめ】CSS opacityが効かない条件と回避方法

opacityが効かない条件は下記すべてを満たしたとき

回避方法

以上、CSS opacityが効かない条件と回避方法でした。