如何在 Shopify 和 GemPages 中使用 CSS 渐变作为背景

什么是 CSS 渐变？

A CSS 渐变 是一种在两种或多种颜色之间过渡的背景样式。与传统图像不同，渐变是通过代码创建的，因此可扩展、轻量且易于自定义。

CSS 渐变主要有三种类型：

• 线性渐变：沿直线过渡颜色（例如，从上到下或从左到右）。
  计费示例： 线性渐变（红色，绿色）
• 径向渐变：颜色从中心点向外辐射。
  计费示例： 径向渐变（圆形，蓝色，白色）
• 圆锥梯度：颜色像饼图一样围绕中心点旋转。
  计费示例： 圆锥渐变（90度，红色，黄色，绿色）

推荐的 CSS 渐变生成器

这些免费工具使它变得更容易：

• CSS 渐变 - 线性和径向渐变的用户友好界面
• uiGradients– 美观且随时可用的预设
• Coolors 梯度发生器 – 非常适合品牌调色板
• 梯度搜寻 – 社区策划的渐变

这些生成器提供视觉预览，让您只需单击即可复制 CSS。

如何在 Shopify 中设置渐变背景

Shopify 主题现在允许您直接从 主题编辑器。使用自定义 CSS 的方法如下：

第三步： 在MyCAD中点击 软件更新 网上商店 > 主题 在您的 Shopify 管理员中。

第三步： 点击 定制 单击要编辑的主题旁边的

第四步： 点击 设置（齿轮图标） 然后选择 颜色.

第三步： 下 计划中，单击要编辑的方案。

第三步： 选择您想要修改的渐变。

第三步： 单击旁边的箭头 梯度，然后选择 的CSS.

第三步： 将渐变 CSS 代码粘贴到输入字段中。 

第三步： 点击 已保存.

您将在主题编辑器预览中看到结果。此方法适用于标题、横幅，甚至整个版块.

如何在 GemPages 中添加 CSS 渐变背景

GemPages 原生支持背景自定义，包括静态颜色、渐变色和图片。但如果您想更好地控制，可以使用 自定义CSS， 就是这样：

第 1 步：右键单击 在您想要应用渐变的部分上。

第三步： 从我们的数据库中通过 UL Prospector 平台选择 自定义代码 从上下文菜单。

第三步： 在出现的 CSS 模式中，输入您的自定义 CSS 代码。例如：

.gdXweR3hSd {

  背景：线性渐变（135度，#f6d365，#fda085）！重要；

}

说明：

.gdXweR3hSd

• 这是一个 CSS 类选择器.
• 它针对页面上具有类名的任何元素 .gdXweR3hSd

背景：线性渐变（135度，#f6d365，#fda085）；

• 此行应用 渐变背景 到选定的部分。

让我们进一步分解一下：

• 背景: 是用于设置元素背景的 CSS 属性。
• 线性渐变（…） 是一个创建 颜色之间的平滑过渡.
• 135deg：这意味着渐变将沿对角线流动——从 从左上角到右下角.
  • 您可以将此值更改为其他角度，例如 90deg （从左到右） 180deg （从上到下）等等。
    
• #f6d365：这是 起始颜色 的梯度。
• #fda085：这是 结束颜色 的梯度。

第三步： 点击 已保存.