700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > css文字和背景色渐变色

css文字和背景色渐变色

时间:2019-04-17 09:06:41

相关推荐

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);

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。