css3文字渐变无效果的解决方案

现在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;
  }

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

原文地址:https://www.cnblogs.com/0955xf/p/9271280.html

时间: 2024-11-08 09:03:18

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

css3实现文字渐变动画效果

利用css3这个属性(背景剪裁): background-clip: border-box || padding-box || context-box || no-clip || text 本次用到的就是: -webkit-background-clip:text; 栗子: 1. <style> .masked{ text-align: center; background-image: -webkit-linear-gradient(left, #147B96, #E6D205 25%, #

Css3 文字渐变整理(一)

一.文本颜色渐变 <gradient> :可以应用在所有接受图像的属性上,允许使用简单的语法实现颜色渐变,以便UA在渲染页面自动生成图像. 语法:<gradient> = linear-gradient() | repeating-linear-gradient() | radial-gradient() | repeating-radial-gradient() 注意:必需在一个有尺寸的盒子里生成.如果盒子没有尺寸,渐变效果则无法呈现. 可以作用在能接受图像的任意属性上: bac

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

1.优化了之前的代码: 2.修正了先前按照文字的条目的数量计算速度的问题,现在改为按照字符的个数计算动画执行一次需要的时间,更为精确: 3.增添了每一行JS代码的注释. 4.这个案例的用途一般为告警信息的展示: 告警的条数是不确定的,每条告警的字数是不确定的,展示告警的区域可根据浏览器的分辨率进行放大缩小: 本案例的书写满足这几个条件. 5.本案例的实现思路: 1)设置一个展示文字的div:该div的宽度用百分比来表示: 2)设置一个能够放下所有的文字条目的div:该div的宽度通过计算得到:

CSS3实现文字扫光效果

本篇文章由:http://xinpure.com/css3-text-light-sweep-effect/ CSS3 实现的文字扫光效果,几乎可以和 Flash 相媲美了 效果解析 我们分析一下实现这个效果需要实现的功能: 实现一个扫光背景块,因为光是移动的,所以要加入渐变效果 (例如: 手电筒照射的一小块区域) 将扫光背景块控制到文本上 (即实现文本背景) 实现扫光动画 (扫光块从左往右循环移动) 思路理清了,接下来就是一步一步实现了 背景渐变 -webkit-linear-gradient

CSS3制作渐变文字

CSS3制作渐变文字(-webkit-mask-image 与 -webkit-background-clip) 今天去css-tricks无意间发现了标题运用渐变文字这一效果,这使的想起了webkit内核浏览器的一些私有属性.而实现渐变文字这一特效可以借助webkit浏览器的两个私有属性-webkit-mask-image与-webkit-background-clip. 既然称之为webkit私用属性,我想大家都懂的,要用webkit内核浏览器才能看到效果.Chrome/Safari,这两个

纯CSS3文字效果推荐

之前曾经研究过几个纯css实现的文字效果,<CSS文字条纹阴影动画>和<响应式奶油立体字效果>等,今天我们来研究几款文字效果,主要利用text-shadow.webkit内核的几个独有特性实现效果. 在线研究单击这里,下载收藏单击这里. 效果1-立体字效果 我们的html文件貌似这样,为了更好的展示效果,我们加上了可编辑属性. <div contenteditable="true" class="text effect01">前端

【CSS3】使用CSS3线性渐变实现图片闪光划过效果(转)

原文:http://www.nowamagic.net/librarys/veda/detail/2600 资料参考: http://www.cnblogs.com/lhb25/archive/2013/01/30/css3-linear-gradient.html  CSS3 经典教程系列:CSS3 线性渐变(linear-gradient) HTML <p class="overimg"> <a><img src="http://www.no

CSS3 线性渐变(linear-gradient) 兼容IE8,IE9

一.线性渐变在 Mozilla 下的应用     语法: 1 -moz-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* ) 参数:其共有三个参数,第一个参数表示线性渐变的方向,top 是从上到下.left 是从左到右,如果定义成 left top,那就是从左上角到右下角.第二个和第三个参数分别是起点颜色和终点颜色.你还可以在它们之间插入更多的参数,表示多种颜色的

CSS3-渐变背景色

线性渐变背景色: <style> .linear { width:130px; height:130px; border:2px solid black; padding: 10px; background: -webkit-gradient(linear, left top, left bottom, from(#00abeb), to(#fff)); -webkit-background-origin: padding; -webkit-background-clip: content;