网站建设中css文本渐变如何做?

要将渐变颜色应用于文本,首先,需要创建背景渐变:

.text-gradient {
// color: linear-gradient(to right, darkblue, darkorchid); // 👈 not working
background: linear-gradient(to right, darkblue, darkorchid);
}

然后,您需要使用文本作为剪切蒙版剪切背景,并隐藏文本:

.text-gradient {
background: linear-gradient(to right, darkblue, darkorchid);
color: transparent;
background-clip: text;
}

要逐步支持所有浏览器:

.text-gradient {
// 👇 show a solid color in older browsers (e.g., IE11)
color: darkblue;

// 👇 show the text gradient in modern browsers
@supports (–css: variables) {
background: linear-gradient(to right, darkblue, darkorchid);
color: transparent;
-webkit-background-clip: text;
background-clip: text;
}
}

 

此技术使您可以将渐变应用于单个单词或多个文本行。

这是一个例子:

 

HTML

<div class="flex flex-center height-100vh padding-md">
<h1 class="text-gradient">Text Gradients</h1>
</div>

 

HTML SCSSResult Skip Results Iframe
EDIT ON
// 💡 How to create text gradients in CSS
// 🔗 https://codyhouse.co/nuggets/text-gradients

.text-gradient {
font-size: 4em;
font-weight: bold;
text-align: center;

background: linear-gradient(to right, darkblue, darkorchid); // create bg gradient
color: transparent; // hide text fill
background-clip: text; // use text as clipping mask for bg

&::selection {
color: white;
background: darkorchid;
}
}
View Compiled

Resources1×0.5×0.25×Rerun

原创文章,作者:ItWorker,如若转载,请注明出处:https://blog.ytso.com/262059.html

(0)
上一篇 2022年5月25日
下一篇 2022年5月25日

相关推荐

发表回复

登录后才能评论