文字颜色渐变

最新推荐文章于 2024-04-23 20:13:11 发布

Roger-006

最新推荐文章于 2024-04-23 20:13:11 发布

阅读量2k

点赞数 1

分类专栏： html5 css

本文链接：https://blog.csdn.net/AJINGJINGJJ/article/details/91954916

版权

html5 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

css

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport"  content="width=device-width,initial-scale=1,maximum-scale=1.0,minimum-scale=1.0"/>
		<title></title>
		<style>
			.div {
				height: 150px;
				width: 350px;
				overflow: scroll;
				background: linear-gradient(-30deg, rgba(0,0,0,.9) 0%, rgba(200,60,200,.9) 100%) top center/100% 100% no-repeat;//背景渐变色
				background-attachment: local;//背景跟随滚动
				-webkit-background-clip: text;//背景显示在文字笔画区域
				background-clip: text;
				color: transparent;//文字颜色设置为透明
			}
		</style>
	</head>
	<body>
		<div class="div">
			御用测试文本 御用测试文本 御用测试文本 御用测试文本 御用测试文本 御用测试文本 御用测试文本 御用测试文本 御用测试文本 御用测试文本 御用测试文本 御用测试文本 御用测试文本 御用测试文本 御用测试文本 御用测试文本 御用测试文本 御用测试文本 御用测试文本 御用测试文本 御用测试文本 御用测试文本 御用测试文本 御用测试文本 御用测试文本 御用测试文本 御用测试文本 御用测试文本 御用测试文本 御用测试文本 御用测试文本 御用测试文本 御用测试文本 御用测试文本 御用测试文本 御用测试文本 
		</div>
	</body>
</html>

效果：

Roger-006

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
文字颜色渐变

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1.0,minimum-scale=1.0"/> &lt...
复制链接

扫一扫

专栏目录