# アセットごとに背景を透過にする方法について

**URL:** <https://community.shopify.com/t/topic/222406>\
**Category:** 技術的なQ＆A\
**Tags:** css\
**Created:** [June 7, 2023, 2:25am UTC](https://community.shopify.com/t/topic/222406 "2023-06-07T02:25:36Z")\
**Posts on this page:** 4\
**Page:** 1

## AI-generated summary

テーマの色を透明にしても、PNG画像の透過部分がアセット（コンテンツブロック）で黒く表示される問題。アセットごとに背景を透過にしたい、が現状できない。 

- 提案された確認点: 画像の親要素などにbackground-colorが指定されていないかを確認。背景色が無ければ透過されるはず、との指摘。
- 試行結果: 親要素の背景を探して調整したが解決せず。透過部分が黒または白で表示。回避策として新規のLiquid（Shopifyのテンプレート言語）を作成し表示は改善したが、ページごとに背景を付与・切替する方法が新たな課題に。
- 共有コード: assets/section.cssの該当らしき箇所を提示（.\#section.\@color-scheme系や.\@bg系でbackground-colorを指定）。ここを変更しても透過にならない模様で、対象箇所か不明。

現状: 最終解決には至っていない。課題は(1) 透過PNGが黒/白になる原因となる親要素やスキームCSSの特定、(2) ページ単位で背景を制御する方法の確立。コード断片が問題理解に中核。

<div class="post-metadata">

**Author:** ![WorksDesign](https://avatars.discourse-cdn.com/v4/letter/w/aca169/32.png) [@WorksDesign](https://community.shopify.com/u/WorksDesign)\
**Post date:** [June 7, 2023, 2:25am UTC](https://community.shopify.com/t/topic/222406/1 "2023-06-07T02:25:36Z")

</div>

アセットごとに背景を透過にする方法について質問させていただきます。

テーマ設定の色を透明にしても、ping画像を配置するとアセット（コンテンツのブロック）の背景が黒くなってしまいます。

どなたかご存じであればご教示いただけましたら幸いです。

何卒よろしくお願いいたします。

---

<div class="post-metadata">

**Author:** ![Anonymous\_44fbe07fc59d9ccaacd70575fd5a5155](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/anonymous_44fbe07fc59d9ccaacd70575fd5a5155/32/194200_2.png) [@Anonymous\_44fbe07fc59d9ccaacd70575fd5a5155](https://community.shopify.com/u/Anonymous_44fbe07fc59d9ccaacd70575fd5a5155)\
**Post date:** [June 8, 2023, 9:50am UTC](https://community.shopify.com/t/topic/222406/2 "2023-06-08T09:50:02Z")

</div>

WorksDesign様

ご質問を確認いたしました。

画像を表示されている部分(親要素等)の背景にbackground-color等の色を表示するcssは入っていないでしょうか？

背景に色が入っていなければ、おそらく透過されて表示されるはずなので、一度ご確認くださいませ。

ご参考までに。

フルバランス 園畑

---

<div class="post-metadata">

**Author:** ![WorksDesign](https://avatars.discourse-cdn.com/v4/letter/w/aca169/32.png) [@WorksDesign](https://community.shopify.com/u/WorksDesign)\
**Post date:** [June 11, 2023, 7:36am UTC](https://community.shopify.com/t/topic/222406/3 "2023-06-11T07:36:28Z")

</div>

フルバランス 園畑様

お世話になっております。質問へのご回答ありがとうございました\<(\_ \_)\>  
結局、親要素の背景部分と思われる部分を探して、いろいろやってみましたが解決できませんでした。透過部分が黒く表示されるか透過にならず白くなるだけでした。

結局、解決策としては新たにliquidを作成したら背景はでるようにはなったのですが、  
今度はページごとに背景をつけるにはどうしたらいいかという問題が発生しております。  
ご存じでしたら、ご教示いただけましたら幸いです\<(\_ \_)\>  
よろしくお願いいたします。

---

<div class="post-metadata">

**Author:** ![WorksDesign](https://avatars.discourse-cdn.com/v4/letter/w/aca169/32.png) [@WorksDesign](https://community.shopify.com/u/WorksDesign)\
**Post date:** [June 11, 2023, 12:19pm UTC](https://community.shopify.com/t/topic/222406/4 "2023-06-11T12:19:51Z")

</div>

フルバランス 園畑様

お世話になります。市川です。

以下、アセットの中のsection.cssのコードの一部なのですが、背景が透過されませんでした。。ここではないのでしょうか。。

.#section.@bg:alt {  
background-color: #f2f2f2;  
}

.#section.@bg:dark {  
background-color: #1a1a1a;  
}

.#section.@bg:primary {  
background-color: rgb(var(–color-base-accent-1));  
}

.#section.@color-scheme:default {  
color: rgba(var(–color-text), 1);  
background-color: rgba(var(–color-background), 1);  
}

.#section.@color-scheme:alt {  
color: rgba(var(–color-text), 1);  
background-color: rgba(var(–color-alt-background), 1);  
}

.#section.@color-scheme:invert {  
color: rgba(var(–color-background), 1);  
background-color: rgba(var(–color-text), 1);  
}

.#section.@color-scheme:accent {  
color: rgba(var(–color-accent-c), 1);  
background-color: rgba(var(–color-accent), 1);  
}

よろしくお願いいたします\<(\_ \_)\>