如何在 shopify liquid 中为部分添加背景颜色

Question

我正在尝试为我的 shopify 幻灯片部分添加背景颜色，但它不起作用。

我尝试添加一个新的 div:

<div style="background-color:{{block.settings.color_accent}}">

但是我遇到了html错误。我究竟做错了什么？有人可以告诉我如何解决吗？

Answer 1

检查您的 'slideshow2.css' 样式文件。我认为这个外部文件有一个 CSS 样式的标签，它覆盖了 div 标签的内联 CSS 样式的样式。

解决方案一： 尝试在 'slideshow2.css' 文件中注释 div 标签的 CSS 样式并检查浏览器上的输出。通过这种方式，您可以了解哪些 CSS 样式重叠或覆盖。然后解决具体的。

方案二： 在浏览器中使用检查元素工具并尝试使用内联 CSS 更改 div 的颜色。如果它影响背景颜色，请适当更改为 HTML 文件。否则调试问题并找出背景颜色未出现的确切问题。

方案三： 尝试直接使用背景颜色名称。也许它没有从所需的字符串 block.settings.color_accent.

中正确读取

<div style="background-color:deepskyblue;"></div>

Answer 2

您可以尝试下面的代码并且必须将此代码添加到您已创建的块架构代码中：

{
  "type": "color",
  "id": "color_accent",
  "label": "Buttons color",
  "default": "#FFFFFF"
}

并且您需要创建一个 div:

<div style="background-color:{{block.settings.color_accent}}">

Answer 3

将此添加到架构

{ “类型”：“image_picker”， "id": "background-image", “标签”：“图片” }

然后在 div

上这样称呼它

style="background: url('{{ section.settings.background-image | img_url: 'master' }}')"

是 img_url 给您带来麻烦，这是正确的背景设置。

How to add background color to section in shopify liquid