Open1

透過pngでborder-radiusが効かない件

imgタグでborder-radiusを指定すると、
透過pngの場合のみborder-radiusで切り取った箇所の下の要素が見えなくなる(透過される)問題
jpegの場合は問題なく見える。

<img
            style={{
              width: 340,
              height: 450,
              objectFit: "cover",
              borderBottomLeftRadius:'880px 400px',
              borderTopRightRadius:'880px 400px'
            }}
            src={"/images/baseball_batter_man.png"}
          />

暫定対処

  • pngをjpgに変換する

関連stackoverflow

ログインするとコメントできます