角丸画像の背景色を透明にしたいです

角丸画像の背景色を透明にしたいです。figureタグに角丸のjpg画像を入れて表示したところ角丸の四隅の余白部分が白くなり透明になりません。
img要素にbackgroun-color:transparentを書いたのですが反映されませんでした。pngではなくjpgを使いたく、 また mix-blend-mode: multiply;を書けば透明化されますが、なぜtransparetでは透明にならないのか教えて頂きたいです。img要素ではなく親要素に書いても反映されませんでした。検証ツールにはbackgroun-color:transparentが記載されています。キャッシュクリアも行いシークレットウィンドウでも反映されませんでした。よろしくお願いします。

No.1 回答者： fujillin 回答日時： 2023/06/24 00:21

こんばんは

「角丸画像」とおっしゃっているものは、画像そのものが角丸になっている（はず）という意味でしょうか？
もしそうなら、余白部分が透明になっておらず白色になっている画像なのだろうと推測します。
元の画像が透明でないものを、CSS等で透明化しようとしても、少々無理があります。
（全体を透明や半透明にするのなら可能ですが・・）


とは言え、対処法はいくつか考えられます。

1）画像の白色部分を透明化する。
最も普通の方法と思いますが、事前に画像を加工しておく必要があります。
また、jpg画像では透明化ができないので、透明化の概念があるpng、gifなどを用いる必要があります。

＞pngではなくjpgを使いたく
jpgに拘るのであれば、別の方法として、画像要素の範囲を限定する方法が考えられます。
正確には「透明化」ではありませんが、結果として同じような見え方になります。
こちらであれば、CSSで対応可能です。

2）要素を角丸にする
いわゆる普通の角丸であれば、
　border-radius
を画像の角丸に合わせて設定しておけば、画像要素の範囲自体が角丸になるので、その外側は表示されなくなり、透明化したのと同様の結果になります。
（包含要素に設定して同様の効果を得ることも可能です）
https://developer.mozilla.org/ja/docs/Web/CSS/bo …

3）画像要素を切り抜いて表示する
上記とほぼ同じですが、clip-path を利用する方法です。
自由なpathを用いることもできますので、角丸に限らず自由な形（星形とか、ハート形とか）に切り抜くことも可能です。
https://developer.mozilla.org/ja/docs/Web/CSS/cl …

この回答へのお礼

ご回答ありがとうございます。
border-radiusでやってみた時に、画面縮小すると白背景が残っていたのでその他の方法を調べていたのですが、overflow:hidden;で出来ました。 pathのことも教えて頂き今後の参考にさせていただきます。ありがとうございました！

お礼日時：2023/06/24 08:40