css文字和背景色渐变色

定义一个div：

<div class="shop-title" >上海迪士尼度假区官方旗舰店</div>

使用css：

.shop-title{
　　width:200px;
    background: -webkit-linear-gradient(left,#fc0,#f30 50%,#c00 51%,#600);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

一定要加上div的宽度，否则，背景的渐变色不能显示出来：

对背景添加线性渐变：background: -webkit-linear-gradient(left,#fc0,#f30 50%,#c00 51%,#600);

对文字进行透明处理：color:transparent(此时会显示出文字后面的背景颜色)

最后仅仅针对文字应用渐变（注意，此特性"text"仅仅在webkit内核的浏览器中得到支持）

-webkit-background-clip:text;

此句代码作用是只有文字能够显示出渐变的背景，但是由于文字色是黑色，会将背景颜色覆盖掉，因此添加了color的transparent属性，令文字部分透明，从而达到欲达到的效果

2：背景色渐变色：

background:-webkit-linear-gradient(top,#0c46a3,#9e09b1);
                background:-moz-linear-gradient(top,#0c46a3,#9e09b1);
                background:linear-gradient(top,#0c46a3,#9e09b1);