|
|
|
|
|
|
贊助商
分類目錄
贊助商
最新文章
搜索
如何使用CSS為文本添加漸變疊加【實(shí)例】
作者:admin 時(shí)間:2021-9-8 9:41:27 瀏覽:要將漸變疊加添加到文本元素，我們需要為要設(shè)置樣式的文本設(shè)置三個(gè)不同的 CSS 屬性：
background-image: <gradient>
background-clip: text
text-fill-color: transparent
第 1 步：添加漸變作為背景
在這個(gè)例子中，我們將使用線性漸變，可以這樣繪制：
.gradient-text {
background-image: linear-gradient(45deg, #f3ec78, #af4261);
}要使?jié)u變覆蓋文本字段的整個(gè)寬度和高度，請(qǐng)?jiān)O(shè)置background-size: 100%，這就是我在本示例中所做的。
第 2 步：將背景剪切到文本
在這一點(diǎn)上，我們?cè)诒尘爸杏形覀兊臐u變，文本顯示在它上面。
我們要做的下一件事是設(shè)置background-clip: text. 這只會(huì)渲染有文本的背景。如果你對(duì)此進(jìn)行測(cè)試，你的漸變似乎已經(jīng)完全消失了，這是因?yàn)槲谋救匀槐讳秩?，并且漸變層隱藏在下面。
這就是為什么我們必須將設(shè)置text-fill-color為transparent。它將從文本中刪除填充，使?jié)u變?cè)俅慰梢姟?/p>
第 3 步：添加回退
并非所有瀏覽器都支持將漸變作為剪切在文本頂部的背景圖像，因此添加回退很重要。我們也可以通過向background-color文本添加屬性來做到這一點(diǎn)。
.gradient-text {
background-color: #f3ec78;
background-image: linear-gradient(45deg, #f3ec78, #af4261);
background-size: 100%;
-webkit-background-clip: text;
-moz-background-clip: text;
-webkit-text-fill-color: transparent;
-moz-text-fill-color: transparent;
}另外，在某些瀏覽器中，圓錐梯度conic-gradients 不會(huì)顯示。在這些情況下，也可以添加線性梯度linear-gradient作為圓錐梯度conic-gradient的后備。
.gradient-text {
background-color: #f3ec78;
background-image: linear-gradient(#f3ec78, #af4261);
background-image: conic-gradient(#f3ec78, #af4261);
}
在此示例中，文本將具有圓錐漸變作為疊加層。如果這不起作用，它將顯示線性漸變。在不支持線性漸變的瀏覽器中，文本將被渲染為背景顏色。
更多實(shí)例
您可能對(duì)以下文章也感興趣
- 站長(zhǎng)推薦
