现在css3越来月流行了,为了实现一些高大上的效果,我们会用一些渐变的特效,请看文字渐变的特效代码:

  .title {
font-size: 60px;
line-height: 80px;
text-align: center;
margin-top: 15%;
-webkit-background-clip: text;
background: linear-gradient(to right, red, blue);
color: transparent;
}

  

  <div class="title">
Welcome to our website
</div>

运行一下,发现没有效果,是不是很奇怪

这个时候我们要改变一下属性的顺序:

.title {
font-size: 60px;
line-height: 80px;
text-align: center;
margin-top: 15%;
background: linear-gradient(to right, red, blue);
-webkit-background-clip: text; /*这个属性只能放在background属性的后面*/
color: transparent;
}

再运行一下,是不是很神奇的事情发生了,文字渐变出现了

css3文字渐变无效果的解决方案的更多相关文章

  1. CSS3 文字渐变动画

    背景剪裁 语法:background-clip: border-box || padding-box || context-box || no-clip || text 本次用到的就是: -webki ...

  2. Css3 文字渐变整理(一)

    一.文本颜色渐变 <gradient> :可以应用在所有接受图像的属性上,允许使用简单的语法实现颜色渐变,以便UA在渲染页面自动生成图像. 语法:<gradient> = li ...

  3. css3 文字轮番滚动效果2——改进版

    1.优化了之前的代码: 2.修正了先前按照文字的条目的数量计算速度的问题,现在改为按照字符的个数计算动画执行一次需要的时间,更为精确: 3.增添了每一行JS代码的注释. 4.这个案例的用途一般为告警信 ...

  4. Struts2添加了<s:debug>后页面无效果的解决方案

    一.环境 Struts2版本 struts2.5 二.问题 在jsp页面中添加了<s:debug>后页面上无任何展示. 三.解决 在struts.xml中的struts节点下添加如下常量即 ...

  5. css3.0新属性效果在ie下的解决方案(兼容性)

    css3.0增加的新属性,如投影.渐变.旋转.圆角等等!这些新标准属性在ie6.ie7.ie8浏览器版本里得不到很好的支持,相信ie以后的新版本也会支持这些新属性的.目前ie6.ie7.ie8浏览器不 ...

  6. CSS3实现文字扫光效果

    本篇文章由:http://xinpure.com/css3-text-light-sweep-effect/ CSS3 实现的文字扫光效果,几乎可以和 Flash 相媲美了 效果解析 我们分析一下实现 ...

  7. CSS3实现文字折纸效果

    CSS3实现文字折纸效果 效果图: 代码如下,复制即可使用: <!DOCTYPE html> <html> <head> <title></tit ...

  8. 利用css3的text-shadow属性实现文字阴影乳白效果

    现在CSS3+html5的网页应用的越来越广泛了.很多网页中的字体同样可以用CSS3来实现炫酷的效果. 下面就介绍一下利用css3的text-shadow属性实现文字阴影乳白效果.这是在设计达人上面看 ...

  9. CSS3文字阴影实现乳白文字效果

    CSS3文字阴影实现乳白文字效果是一款有效利用css3的text-shadow属性,可以实现很多漂亮的效果,CSS3 文字阴影 文字特效,字体效果. 源码下载:http://www.huiyi8.co ...

随机推荐

  1. luogu1966 火柴排队

    题目大意 涵涵有两盒火柴,每盒装有 n 根火柴,每根火柴都有一个高度.现在将每盒中的火柴各自排成一列,同一列火柴的高度互不相同,两列火柴之间的距离定义为: $\sum_{i=1}^n(a_i-b_i) ...

  2. ios27--kvo

    // // ViewController.h // 14-KVO的使用 #import <UIKit/UIKit.h> @interface ViewController : UIView ...

  3. socket listen backlog

    http://stackoverflow.com/questions/4253454/question-about-listening-and-backlog-for-sockets The list ...

  4. hdu 5074 Hatsune Miku DP题目

    题目传送门http://acm.hdu.edu.cn/showproblem.php?pid=5074 $dp[i][j] =$ 表示数列前$i$个数以$j$结尾的最大分数 $dp[i][j] = - ...

  5. flask g对象

    g对象  一次请求中使用 下面用redirect重定向,不是同一次请求了 g:global 1. g对象是专门用来保存用户的数据的. 2. g对象在一次请求中的所有的代码的地方,都是可以使用的. 使用 ...

  6. openstack network:dhcp binding fail

  7. 将属性和方法添加到Date原型中

    <button onclick="myFunction()">点我</button> <script> Date.prototype.myMet ...

  8. JS判断字符串中是否存在某个字符

    用String类中的indexOf函数,例如:String str="we find out sth";if(str.indexOf("o")==-1){ // ...

  9. bzoj 1691: [Usaco2007 Dec]挑剔的美食家【贪心+splay】

    高端贪心,好久没写splay调了好久-- 以下v为价格,w为鲜嫩度 把牛和草都按v排升序,扫草,首先把v小于等于当前草的牛都丢进splay,这样一来splay里全是可选的牛了,按w排序,然后贪心的为当 ...

  10. P4556 [Vani有约会]雨天的尾巴(线段树合并)

    传送门 一道线段树合并 首先不难看出树上差分 我们把每一次修改拆成四个,在\(u,v\)分别放上一个,在\(lca\)和\(fa[lca]\)各减去一个,那么只要统计一下子树里的总数即可 然而问题就在 ...