css实现文字渐变
css文件渐变虽然兼容性比较差，但是用在移动端和chrome中还是没有问题的。
实现文件渐变的方法有两种
1. 使用 background 的属性
2. 使用 mask 属性
方式一、
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8">
<style>
span {
font-size: 30px;
background: linear-gradient(to right, red, blue);
-webkit-background-clip: text;
color: transparent;
}
</style>
</head> <body>
<span>Hello world</span>
</body>
</html>
效果如下
代码也是非常简单：
background: liner-gradient(to right, red, blue); 这个就是设置背景色，这是是background-image的简写，不是backround-color
-webkit-background-clip: text; 这个属性在 W3School 上有明确解释
但是并没有text 属性，所以这个只能在chrome上看到效果，在其他浏览器没有实现，它的兼容性就有很大的问题了
方式二、
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" /> <style type="text/css">
h1{
position: relative;
color: yellow;
}
h1:before{
content: attr(data-text);
position: absolute;
z-index: 10;
color:pink;
-webkit-mask:linear-gradient(to left, red, transparent );
}
</style>
</style>
</head> <body>
<h1 data-text="hello world">hello world</h1>
</body>
效果如下
参考 简单说 CSS中的mask—好好利用mask-image
张鑫旭： 小tip:CSS3下的渐变文字效果实现
css实现文字渐变的更多相关文章
- Css3 文字渐变整理（一）
一.文本颜色渐变 <gradient> :可以应用在所有接受图像的属性上,允许使用简单的语法实现颜色渐变,以便UA在渲染页面自动生成图像. 语法:<gradient> = li ...
- css Backgroud-clip (文字颜色渐变)
首先来瞄一下background-clip,这个属性是干嘛的? 顾名思义,背景裁剪... 按照我自己的理解就是背景的显示区域 此处粘上MDN的示例链接(嫌麻烦的,后面我也贴上截图)https:// ...
- css彩色（渐变）文字
css彩色文字也称渐变文字 在张鑫旭博客首页看到这效果,就自己研究了一下. 实现方法加个背景然后在根据文本剪切,再把文本填充为透明色让之前设置的背景颜色显示出来即可. -webkit-backgrou ...
- CSS实现文字竖排 DIV CSS文字垂直竖列排版显示如何实现？
DIV CSS实现文字竖排排版显示兼容各大浏览器,让文字垂直竖列排版布局. 有时我们需要一段文字进行从上到下竖列排版,我们知道CSS样式中有一样式可以让其竖列排版,但所有浏览器不全兼容,逼不得已放弃. ...
- css控制文字长度，超出长度显示...
css控制文字长度,超出长度显示... .style { max-width: 165px; overflow: hidden; white-space: nowrap; text-overflow: ...
- (转载)最实用的清除浮动代码 css的文字过长裁剪后面跟着省略号
css: .clearfloat:after{display:block;clear:both;content:"";visibility:hidden;} .clearfloat ...
- 用CSS让文字居于div的底部
css对文字的布局上没有靠容器底部对齐的参数,目前使用的一个不错的方法也比较好.就是用position属性来解决,看下面的代码,用position的相对和绝对定位功能也轻松的实现了,文字靠近div低部 ...
- --css 控制文字多使用省略号
--css 控制文字多使用省略号.overflowPoint{ text-overflow:ellipsis;width: 200px;overflow: hidden;}<div class= ...
- div介绍 盒子模型边框属性 CSS初始化 文字排版 边框调整 溢出
今天学习的div,了解了div是干什么用的掌握了什么是盒子模型,以及div的外边距内边距以及边框,运用div和CSS给文字排版,利用边框的来做图像,div溢出的处理 CSS初始化: 精确排版的时候用这 ...
随机推荐
- HashMap详解 基于jdk1.7
转载自:http://zhangshixi.iteye.com/blog/672697 1. HashMap概述: HashMap是基于哈希表的Map接口的非同步实现.此实现提供所有可选的映射操 ...
- GitHub简单命令行# 使用命令行传代码到GitHub
第一次提交代码到Github 第一步: 建立本地仓库cd到你的本地项目根目录下,执行git命令 cd到本地项目 git init 第二步: 将本地项目工作区的所有文件添加到暂存区 git add . ...
- zabbix 报警通知选项配置
{TRIGGER.STATUS} host: {HOSTNAME} IP: {HOST.IP} events_time:{EVENT.DATE} {EVENT.TIME} notice_time:{D ...
- 转--C#编程总结
C#编程总结--总目录 http://www.cnblogs.com/yank/p/3543423.html
- JavaScript/JQuery radioButton(单选按钮)练习20190409
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- Low Speed High Torque Hydraulic Motor: Motion Performance
Crank connecting rod type low speed high torque hydraulic motor is used earlier, which is called Sta ...
- Navicat 模型生成表
打开模型 -> 左上角文件 -> 导出SQL 打开sql文件,将sql在数据库执行,注意主键递增.日期类型 根据当前时间戳更新是否需要(默认选中的)等等
- 【C语言项目】贪吃蛇游戏(上)
目录 00. 目录 01. 开发背景 02. 功能介绍 03. 欢迎界面设计 3.1 常用终端控制函数 3.2 设置文本颜色函数 3.3 设置光标位置函数 3.4 绘制字符画(蛇) 3.5 欢迎界面函 ...
- c++_加法变乘法
加法变乘法 我们都知道:1+2+3+ ... + 49 = 1225现在要求你把其中两个不相邻的加号变成乘号,使得结果为2015 比如:1+2+3+...+10*11+12+...+27*28+29+ ...
- matlab ()的用法
经常见到标识符+(),用法比如阵列Y().函数f()..... 时机到了,会总结一下.