color_background设定用以自定CSS环境特性

渐变

您可以在Dawn中设定颜色渐变以得到视觉效果上有意思的环境选择项。color_background设定用以自定CSS环境特性。

提醒:

若要深入分析渐变和CSS环境，客户程序Mozilla的线形渐变和CSS环境文本文档。

根据渐变选择器，您可以选择渐变的颜色、款式、视角、部位和不透明度。在渐变选择器中选择的选择项可在模板编辑软件中即时浏览。您可以应用CSS编码建立渐变环境（包含认证查验器）。

备注名称

现阶段尚不接纳将照片做为背景颜色。

设定渐变

PC:

在Shopify后台管理中，转到在线商店模板。

寻找您要编写的模板，随后点击自定。

点击模板设定。

点击颜色。

选择在其中一个渐变选择项。

假如您以前未设定渐变，则体系会表明一些预置选择项供您选择。您可以选择一切预置的渐变以开启选择项控制面板。

假如您已设定了渐变，点击渐变选择项就可以立即开启选择项控制面板。

选择您的渐变选择项：

您可以在线形渐变或放射性渐变中间开展选择。请应用按键选择您的优选渐变款式。

可利用往上和向下箭头设定渐变视角。点击往上或向下符号一次可将视角扩大或减少5%。

应用滚轮选择渐变的部位，或在字段名中键入标值。

您可以键入特殊颜色的十六进制编码，或应用颜色滚轮选择色彩。近期选择的颜色会展现在渐变选择项控制面板的底端。

假如您想将渐变设定为不全透明，请应用右边滚轮选择渐变的清晰度。您还能够在十六进制颜色编码边上的字段名中键入百分数值。

点击储存。

ios系统：

在Shopify运用中，轻触店铺。

在营销渠道一部分，轻触在线商店。

轻触管理方法模板。

寻找您要编写的模板，随后轻触自定。

轻触编写。

点击模板设定。

点击颜色。

选择在其中一个渐变选择项。

假如您以前未设定渐变，则体系会表明一些预置选择项供您选择。您可以选择一切预置的渐变以开启选择项控制面板。

假如您已设定了渐变，点击渐变选择项就可以立即开启选择项控制面板。

选择您的渐变选择项：

您可以在线形渐变或放射性渐变中间开展选择。请应用按键选择您的优选渐变款式。

可利用往上和向下箭头设定渐变视角。点击往上或向下符号一次可将视角扩大或减少5%。

应用滚轮选择渐变的部位，或在字段名中键入标值。

您可以键入特殊颜色的十六进制编码，或应用颜色滚轮选择色彩。近期选择的颜色会展现在渐变选择项控制面板的底端。

假如您想将渐变设定为不全透明，请应用右边滚轮选择渐变的清晰度。您还能够在十六进制颜色编码边上的字段名中键入百分数值。

点击储存。

安卓手机系统：

在Shopify运用中，轻触店铺。

在营销渠道一部分，轻触在线商店。

轻触管理方法模板。

寻找您要编写的模板，随后轻触自定。

轻触编写。

点击模板设定。

点击颜色。

选择在其中一个渐变选择项。

假如您以前未设定渐变，则体系会表明一些预置选择项供您选择。您可以选择一切预置的渐变以开启选择项控制面板。

假如您已设定了渐变，点击渐变选择项就可以立即开启选择项控制面板。

选择您的渐变选择项：

您可以在线形渐变或放射性渐变中间开展选择。请应用按键选择您的优选渐变款式。

可利用往上和向下箭头设定渐变视角。点击往上或向下符号一次可将视角扩大或减少5%。

应用滚轮选择渐变的部位，或在字段名中键入标值。

您可以键入特殊颜色的十六进制编码，或应用颜色滚轮选择色彩。近期选择的颜色会展现在渐变选择项控制面板的底端。

假如您想将渐变设定为不全透明，请应用右边滚轮选择渐变的清晰度。您还能够在十六进制颜色编码边上的字段名中键入百分数值。

点击储存。

应用CSS设定渐变

大部分CSSbackground特性值都可以用以设定背景颜色。您可以将此字段名用以表明单色（例如#000000、black、rgb(0,0,0,0)、rgba(0,0,0,0)、hsl(0,0%,0%)和hsla(0,0%,0%,1)都将形成纯黑色背景），或用以颜色渐变（例如linear-gradient(red,green)、radial-gradient(red,green)或conic-gradient(red,green)）。渐变还可以反复。

流程：

PC：

在Shopify后台管理中，转到在线商店模板。

寻找您要编写的模板，随后点击自定。

点击模板设定。

点击颜色。

点击要编写的渐变。

点击“渐变”边上的箭头符号并选择CSS。

在CSS编码字段名中，输入或黏贴您的渐变编码。模板编辑软件浏览会在对应部位展示您的渐变。

点击储存。

ios系统：

在Shopify运用中，轻触店铺。

在营销渠道一部分，轻触在线商店。

轻触管理方法模板。

寻找您要编写的模板，随后轻触自定。

轻触编写。

点击模板设定。

点击颜色。

点击要编写的渐变。

点击“渐变”边上的箭头符号并选择CSS。

在CSS编码字段名中，输入或黏贴您的渐变编码。模板编辑软件浏览会在对应部位展示您的渐变。

点击储存。

安卓手机系统：

在Shopify运用中，轻触店铺。

在营销渠道一部分，轻触在线商店。

轻触管理方法模板。

寻找您要编写的模板，随后轻触自定。

轻触编写。

点击模板设定。

点击颜色。

点击要编写的渐变。

点击“渐变”边上的箭头符号并选择CSS。

在CSS编码字段名中，输入或黏贴您的渐变编码。模板编辑软件浏览会在对应部位展示您的渐变。

点击储存。

删掉渐变

若要重设或删掉渐变：

PC：

在Shopify后台管理中，转到在线商店模板。

寻找您要编写的模板，随后点击自定。

点击模板设定。

点击颜色。

点击要编写的渐变。

点击删掉渐变

点击储存。

ios系统：

在Shopify运用中，轻触店铺。

在营销渠道一部分，轻触在线商店。

轻触管理方法模板。

寻找您要编写的模板，随后轻触自定。

轻触编写。

点击模板设定。

点击颜色。

点击要编写的渐变。

点击删掉渐变

点击储存。

安卓手机系统：

在Shopify运用中，轻触店铺。

在营销渠道一部分，轻触在线商店。

轻触管理方法模板。

寻找您要编写的模板，随后轻触自定。

轻触编写。

点击模板设定。

点击颜色。

点击要编写的渐变。

点击删掉渐变

点击储存。

Shopify商户官网原文详细信息：

Gradients

YoucansetupagradientofcolorsinDawnforvisuallyinterestingbackgroundoptions.Thecolor_backgroundsettingisusedtocustomizetheCSSbackgroundproperty.

Tip

TolearnmoreaboutgradientsandCSSbackgrounds,refertoMozillaslineargradientandCSSbackgrounddocumentation.

Thegradientpickerallowsyoutoselectthecolors,gradientstyle,angle,position,andopacityofthegradient.Theoptionsselectedinthegradientpickerarepreviewedinrealtimeinthethemeeditor.YoucanalsocreateagradientbackgroundusingCSScode,whichincludesavalidationchecker.

Note

Imagesarenotcurrentlyacceptedasabackgroundcolor.

Setupgradients

PC：

FromyourShopifyadmin,gotoOnlineStoreThemes.

Findthethemethatyouwanttoedit,andthenclickCustomize.

ClickThemesettings.

ClickColors.

Selectoneofthegradientoptions.

Ifyouhaventpreviouslysetupagradient,thenseveralpresetoptionsaredisplayedforyoutochoosefrom.Selectanypresetgradienttoopentheoptionspanel.

Ifyouvealreadysetupagradient,thenclickingagradientoptionopenstheoptionspaneldirectly.

Selectyourgradientoptions:

Youcanchoosebetweenalinearorradialgradient.Usethebuttonstoselectyourpreferredgradientstyle.

Theangleofyourgradientcanbesetwiththeupanddownarrows.Clickingtheupordownsymbolincreasesordecreasestheanglepercentageby5.

Usetheslidertoselectthepositionofyourgradient,orenteranumericvalueinthefield.

Youcanenteraspecificcolorhexcode,orusethecolorslidertochooseahue.Recentlyselectedcolorsaredisplayedatthebottomofthegradientoptionspanel.

Ifyouwouldlikeyourgradienttobeopaque,thenusethesliderontherighttoselectthetransparencyofyourgradient.Youcanalsoenterapercentageinthefieldnexttothehexcolorcode.

ClickSave.

iPhone：

FromtheShopifyapp,tapStore.

IntheSaleschannelssection,tapOnlineStore.

TapManagethemes.

Findthethemethatyouwanttoedit,andthentapCustomize.

TapEdit.

ClickThemesettings.

ClickColors.

Selectoneofthegradientoptions.

Ifyouhaventpreviouslysetupagradient,thenseveralpresetoptionsaredisplayedforyoutochoosefrom.Selectanypresetgradienttoopentheoptionspanel.

Ifyouvealreadysetupagradient,thenclickingagradientoptionopenstheoptionspaneldirectly.

Selectyourgradientoptions:

Youcanchoosebetweenalinearorradialgradient.Usethebuttonstoselectyourpreferredgradientstyle.

Theangleofyourgradientcanbesetwiththeupanddownarrows.Clickingtheupordownsymbolincreasesordecreasestheanglepercentageby5.

Usetheslidertoselectthepositionofyourgradient,orenteranumericvalueinthefield.

Youcanenteraspecificcolorhexcode,orusethecolorslidertochooseahue.Recentlyselectedcolorsaredisplayedatthebottomofthegradientoptionspanel.

Ifyouwouldlikeyourgradienttobeopaque,thenusethesliderontherighttoselectthetransparencyofyourgradient.Youcanalsoenterapercentageinthefieldnexttothehexcolorcode.

ClickSave.

Android：

FromtheShopifyapp,tapStore.

IntheSaleschannelssection,tapOnlineStore.

TapManagethemes.

Findthethemethatyouwanttoedit,andthentapCustomize.

TapEdit.

ClickThemesettings.

ClickColors.

Selectoneofthegradientoptions.

Ifyouhaventpreviouslysetupagradient,thenseveralpresetoptionsaredisplayedforyoutochoosefrom.Selectanypresetgradienttoopentheoptionspanel.

Ifyouvealreadysetupagradient,thenclickingagradientoptionopenstheoptionspaneldirectly.

Selectyourgradientoptions:

Youcanchoosebetweenalinearorradialgradient.Usethebuttonstoselectyourpreferredgradientstyle.

Theangleofyourgradientcanbesetwiththeupanddownarrows.Clickingtheupordownsymbolincreasesordecreasestheanglepercentageby5.

Usetheslidertoselectthepositionofyourgradient,orenteranumericvalueinthefield.

Youcanenteraspecificcolorhexcode,orusethecolorslidertochooseahue.Recentlyselectedcolorsaredisplayedatthebottomofthegradientoptionspanel.

Ifyouwouldlikeyourgradienttobeopaque,thenusethesliderontherighttoselectthetransparencyofyourgradient.Youcanalsoenterapercentageinthefieldnexttothehexcolorcode.

ClickSave.

UseCSStosetgradients

MostCSSbackgroundpropertyvaluescanbeusedtosetabackgroundcolor.Youcanusethisfieldforsolidcolors(forexample,#000000,black,rgb(0,0,0,0),rgba(0,0,0,0),hsl(0,0%,0%),andhsla(0,0%,0%,1)allproduceasolidblackbackground),orforgradients(forexample,linear-gradient(red,green),radial-gradient(red,green),orconic-gradient(red,green)).Gradientscanalsoberepeated.

Steps:

PC：

FromyourShopifyadmin,gotoOnlineStoreThemes.

Findthethemethatyouwanttoedit,andthenclickCustomize.

ClickThemesettings.

ClickColors.

Clickthegradientyouwanttoedit.

ClickthearrownexttoGradientandselectCSS.

IntheCSScodefield,typeorpasteyourgradientcode.Thethemeeditorpreviewdisplaysyourgradientintheappropriatelocation.

ClickSave.

iPhone：

FromtheShopifyapp,tapStore.

IntheSaleschannelssection,tapOnlineStore.

TapManagethemes.

Findthethemethatyouwanttoedit,andthentapCustomize.

TapEdit.

ClickThemesettings.

ClickColors.

Clickthegradientyouwanttoedit.

ClickthearrownexttoGradientandselectCSS.

IntheCSScodefield,typeorpasteyourgradientcode.Thethemeeditorpreviewdisplaysyourgradientintheappropriatelocation.

ClickSave.

Android：

FromtheShopifyapp,tapStore.

IntheSaleschannelssection,tapOnlineStore.

TapManagethemes.

Findthethemethatyouwanttoedit,andthentapCustomize.

TapEdit.

ClickThemesettings.

ClickColors.

Clickthegradientyouwanttoedit.

ClickthearrownexttoGradientandselectCSS.

IntheCSScodefield,typeorpasteyourgradientcode.Thethemeeditorpreviewdisplaysyourgradientintheappropriatelocation.

ClickSave.

Removeagradient

Toresetorremoveagradient:

PC：

FromyourShopifyadmin,gotoOnlineStoreThemes.

Findthethemethatyouwanttoedit,andthenclickCustomize.

ClickThemesettings.

ClickColors.

Clickthegradientyouwanttoedit.

ClickRemovegradient

ClickSave.

iPhone：

FromtheShopifyapp,tapStore.

IntheSaleschannelssection,tapOnlineStore.

TapManagethemes.

Findthethemethatyouwanttoedit,andthentapCustomize.

TapEdit.

ClickThemesettings.

ClickColors.

Clickthegradientyouwanttoedit.

ClickRemovegradient

ClickSave.

Android：

FromtheShopifyapp,tapStore.

IntheSaleschannelssection,tapOnlineStore.

TapManagethemes.

Findthethemethatyouwanttoedit,andthentapCustomize.

TapEdit.

ClickThemesettings.

ClickColors.

Clickthegradientyouwanttoedit.

ClickRemovegradient

ClickSave.

文章内容由来：Shopify商户官方网站