css文字渐变色
设置class="text"的文字渐变色。
主要使用 background-clip: text;-webkit-background-clip: text; 这两个属性来实现文字的渐变
<body> <span class="text">文字渐变</span> </body>
1.普通渐变。
<style> .text { background: linear-gradient(to right, #ff0000, #0000ff, #00ff00); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } </style>
2.设置颜色终止位置的渐变。
<style> .text { background: linear-gradient(to right, #ff0000 30%, #00ff00 60%, #0000ff 90%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } </style>
3.多个颜色分明的渐变。
设置两个颜色的终止位置相同来设置文字左右两部分不相同的颜色。
.text { background: linear-gradient(to right, #ff0000 50%, #0000ff 50%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
设置一个颜色的起始位置和终止位置来设置文字各部分不相同的颜色。
<style> .text { background: linear-gradient(to right, #ff0000 20%, #00ff00 30% 45%, #0000ff 55% 70%, #ffff00 80%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } </style>
4.也可使用背景图片作为文字的前景色。
.box { background-image: url('./testbak.jpeg'); background-clip: text; -webkit-background-clip: text; color: transparent; font-size: 68px; font-weight: bold; }
注：该效果可能存在兼容性问题。可在https://caniuse.com查询兼容性问题。
