mask-imageを使用したホームページ制作をしていたのですが、画像がうまく表示されなかったりしたのですが、色々試した所解決方法が見つかったのでこちらにまとめておきます。
私が表示されなかったのは、本番環境のSPサイズのみでした。ローカル環境・本番環境のPCでは、問題なく表示されたので安心して本番アップしたら、mask-imageを使用した部分の画像が表示されませんでした。
初めは、この様に指定をしていました。
-webkit-mask-image: url('../images/マスク画像名.png');
mask-image: url('../images/マスク画像名.png');原因がわからなかったので、mask-imageの使用を一度諦めてしまいました。
しかし、どうしてもmask-imageを使用が必要になり色々試してみたところ画像のURLを省略して指定していたのが、原因ではないかと思い丁寧に書き直しました。
-webkit-mask-image: url('/◇◇◇/△△△/○○○/images/マスク画像名.png');
mask-image: url('/◇◇◇/△△△/○○○/images/マスク画像名.png');すると、問題なく本番環境のSPでも表示することができました。
原因は、画像のURLを省略したことでした。mask-imageを使うときの省略がダメなのかもしれません。
