• 微信号:wumiao_357234902
您当前的位置:首页>web前端开发>CSS

css3实现文字渐变色,background-image和background-clip

作者:Miao 阅读:2315次

给文字渐变很简单,只需要用到css3的background-image和background-clip属性,我们先来看看效果:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>CSS3 实现文字渐变色</title>
	</head>
	<style type="text/css">
		#linear-gradient {
			font-size: 24px;
			background-image: linear-gradient(red, blue);
			-webkit-background-clip: text;
			color: transparent;
		}
	</style>
	<body>
		<div id="linear-gradient">渐变的文字效果</div>
	</body>
</html>

效果预览:


知识点:

background-clip 背景裁剪

目前background-clip: text只有chrome支持,所以我们直接写成-webkit-background-clip:text;

这个属性的意思表示以区块文字作为裁剪区域向外裁剪,文字背景色=区块背景色。

color: transparent;

这个属性的意思就是把文字设为透明,因为我们的文字是有颜色的,只有把文字设为透明后面的背景色才能看到后面的背景色。

本站部分文章、数据、素材收集于互联网,一切版权均归源网站或原作者所有!

如果侵犯了您的权益请来信告知我们删除,邮箱:357234902@qq.com

标签:CSS