css Backgroud-clip (文字颜色渐变)
首先来瞄一下background-clip,这个属性是干嘛的？
顾名思义，背景裁剪... 按照我自己的理解就是背景的显示区域
此处粘上MDN的示例链接（嫌麻烦的，后面我也贴上截图）https://developer.mozilla.org/zh-CN/docs/Web/CSS/background-clip
background-clip共有4个属性值，默认是border-box
padding-box(背景显示区域不包括边框线)
content-box(背景显示区域只有内容)
最后一个属性值：text，也就是做文字渐变的重点了，这个效果类似于PS里的剪贴蒙版，效果图：
代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="./index.css">
</head>
<style>
.box{
display: inline-block;
font-size: 48px;
font-weight: bold;
background:linear-gradient(45deg,red,blue,yellow,green);
background-clip: text;
-webkit-background-clip: text;
color:transparent;
}
p{
margin:0;
}
</style>
<body>
<div class="box">
<p>落魄前端</p>
<p>在线炒粉</p>
</div>
</body>
那这个属性兼容性方面又怎么样呢？
目前IE浏览器不支持 text，其他浏览器则需要加上兼容前缀，但其他属性值大部分都支持了（真是个让人伤心的消息）
不过这个属性用来做文字的渐变确实很方便，还可以将背景图片剪贴到文字上
css Backgroud-clip (文字颜色渐变)的更多相关文章
- 第四界css大会 黑魔法-css网格背景、颜色拾取器、遮罩、文字颜色渐变、标题溢出渐变等
1.css网格背景 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
- css3实现背景颜色渐变，文字颜色渐变，边框颜色渐变
css3的渐变可以使用2个或者多个指定的颜色之间显示平稳的过渡的效果.这篇文章主要介绍下css3实现背景颜色渐变,文字颜色渐变,边框颜色渐变的方法,以便大家学习参考! 1.css背景颜色渐变 代码: ...
- 使用CSS3创建文字颜色渐变(CSS3 Text Gradient)
考虑一下,如何在网页中达到类似以下文字渐变的效果? 传统的实现中,是用一副透明渐变的图片覆盖在文字上.具体实现方式可参考 http://www.qianduan.net/css-gradient-te ...
- css文字颜色渐变的3种实现
在web前端开发过程中,UI设计师经常会设计一些带渐变文字的设计图,在以前我们只能用png的图片来代替文字,今天可以实现使用纯CSS实现渐变文字了.下面就介绍3中实现方式供大家参考! 基础样式: .g ...
- css过滤镜实现颜色渐变
语法:filter : progid:DXImageTransform.Microsoft.Gradient ( enabled=bEnabled , startColorStr=iWidth , e ...
- CSS3 loading 和 文字颜色渐变
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- CSS和JS两种颜色渐变文字效果代码
js实现颜色渐变文字效果代码: <!-- js颜色渐变色文字 --> <div id="moml"> <div style="text-al ...
- 神奇的 CSS，让文字智能适配背景颜色
最近几天,有好几个同学都问了同样一个问题. 页面上有一段文本,能否实现这段文本在不同背景色下展示不同的颜色?也就是俗称的智能变色.像是下面这样: 文本在黑色底色上表现为白色,在白色底色上表现为黑色.看 ...
- css颜色渐变在不同浏览器的设置
在web开发中,难免会遇到浏览器之间的兼容问题,关于Css设置颜色渐变下面有解决的办法,直接上代码: 适用于谷歌浏览器: background: -webkit-gradient(linear, 0 ...
随机推荐
- Python 基础 面向对象之二 三大特性
Python 基础 面向对象之二 三大特性 上一篇主要介绍了Python中,面向对象的类和对象的定义及实例的简单应用,本篇继续接着上篇来谈,在这一篇中我们重点要谈及的内容有:Python 类的成员.成 ...
- Kickstart Round H 2019 Problem B. Diagonal Puzzle
有史以来打得最差的一次kickstart竟然发生在winter camp出结果前的最后一次ks = = 感觉自己的winter camp要凉了 究其原因,无非自己太眼高手低,好好做B, C的小数据,也 ...
- java编程思想第四版第十章总结
1. 内部类的特性 他允许你把一些逻辑相关的类组织在一起. 2. 使用.this 如果你需要在内部类中堆外部类进行应用,可以使用外部类的名字后面加.this.下面展示了如何使用 .this packa ...
- Bootstrap——导航条（navbar）
导航条和导航从外观上差别不是太多,但在实际使用中导航条要比导航复杂得多. 导航条(navbar)中有一个背景色.而且导航条可以是纯链接(类似导航).表单以及表单和导航一起结合等多种形式. 在制作一个基 ...
- 图解Elasticsearch的核心概念
本文讲解大纲,分8个核心概念讲解说明: NRT Cluster Node Document&Field Index Type Shard Replica Near Realtime(NRT)近 ...
- 玩转网络（一）用TTL（Time To Live）排查网络问题
先大概介绍一下TTL(Time To Live)吧! TTL翻译过来就是网络生存时间,说的是一个网络数据包,它在网络设备中转发的跳数(网络设备这里一般指的是路由器),默认值为64,也有很多设置为了12 ...
- ASP.NET Aries 高级开发教程：如何写WebAPI接口
前提: 最近,有不少同学又问到,Aries里如何提供WebAPI接口? 针对这个问题,今天给顺路写个教程,其实呢,很简单的. 方式一:直接用WebService提供接口. 用这种方式,直接添加接口就可 ...
- Java Web登录界面
非常激动的开通了我的第一个博客,在这里希望大家能多多指点,相互学习. 一个简单的登录界面 首先我们先把这个登录分为三块: 一.数据库 数据库我用的是MYSQL: 二.前端 三.后台 1. 后台代码的 ...
- Kafka原理详解
Kafka是最初由Linkedin公司开发,是一个分布式.支持分区的(partition).多副本的(replica),基于zookeeper协调的分布式消息系统,它的最大的特性就是可以实时的处理大量 ...
- Spring源码分析之AOP
1.AOP简介 AOP即面向切面编程(Aspect Oriented Programming),通过预编译方式及运行期动态代理实现程序功能的统一维护的一种技术.使用aop对业务逻辑的各个部分进行隔离, ...