少しわかりづらいのですが、画像にCSSで border-radiusを当てたのですが、画像右上のように背景が白くなってしまいます。
こちらを消す方法などあれば教えていただきたいです。テーマはSenseでテキスト付き画像の編集になります。
Topic summary
問題の内容:
画像にCSS border-radius を適用したところ、画像の右上に白い背景が表示されてしまう不具合が発生。この白い部分を消す方法についての質問。
提案された解決策:
-
テーマ設定での調整: Senseテーマのカスタマイズ画面から、コレクションカードや商品カードなど、該当セクションの角丸設定を変更可能。スクリーンショット付きで設定箇所が示されている。
-
CSS詳細調整: テーマ設定で対応できない場合は、
box-shadowが設定されている親要素のCSSクラスを特定し、そこにborder-radiusを適用することで違和感を解消できる可能性がある。具体的にはcomponent-card.liquidなどのアセットファイルで設定がまとめられている。
追加情報:
より具体的な回答には、実際のサイトURLやプライベートメッセージでの詳細共有が必要との提案もあり。
興味があり調査してみました。
どのセクション(もしくはブロック)の画像の角丸を変更されたいかによるのですが、
もし、元々、角丸になっていた箇所の丸みを変更されたい場合は、
テーマのカスタマイズ画面の、下記の項目で変更できます。
この図の場合は、コレクションカードの丸みを変更する、となりますが、
他にも商品カードの設定なども用意されています。
もし、こちらから目的の箇所の角丸の変更ができない場合は、
border-radiusを設定する要素を変更されるのが良いかと思います。
画像ではなくもっと上の親要素のうち、box-shadowが設定されている要素に、
border-radiusを設定することで違和感がなくなるはずです。
カード系であれば、
アセット(assets)のcomponent-card.liquidに
設定がまとめられているように見受けられましたので、
こちらから設定すべきCSS Classを探されると良いかもしれません。
実際のサイトのURLを、
プライベートメッセージでお送りいただければ、
もう少し具体的な説明もできるかもしれません。
(必ず回答をする約束はできないですが。。。)
ご参考まで。
(キュー田辺)