Heim >Web-Frontend >CSS-Tutorial >Ausführliche Erläuterung von zwei Möglichkeiten, mit reinem CSS Textverlaufsfarben zu erzielen
Ausführliche Erläuterung von zwei Möglichkeiten, mit reinem CSS Textverlaufsfarben zu erzielen
- 青灯夜游nach vorne
- 2021-04-23 19:19:403780Durchsuche
In diesem Artikel werden Ihnen zwei Möglichkeiten vorgestellt, wie Sie mit reinem CSS Textverlaufsfarben erzielen können. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird für alle hilfreich sein.
Erklärung
Der Fokus liegt dieses Mal auf zwei Attributen:
Hintergrundattribut
Maskenattribut
Diese beiden Attribute sind der Schlüssel zu den beiden Implementierungsmethoden. „Methode 1“ rechts, rot, blau ); Diese Zeile legt die Verlaufsfarbe für den Hintergrund fest. Dabei handelt es sich tatsächlich um eine Abkürzung für background-image, nicht für background-. Farbe ist die Verlaufsfarbe des Hintergrundbilds. Wenn Sie die Verlaufsfarbe nicht kennen, können Sie sie sich hier direkt ansehen:
CSS3-Verlauf (Verläufe)
-webkit-background-clip: text ; In dieser Zeile geht es um das Attribut „background-clip“ Schauen wir uns die Beschreibung auf W3Cschool anDas Attribut „background-clip“ gibt den Zeichenbereich des Hintergrunds an
Syntaxbackground-clip: border-box|padding-box|content-box; 
Also schreiben wir schließlich color: transparent;, um den Text transparent zu machen, was bedeutet, dass die Hintergrundfarbe dahinter angezeigt wird.
background: linear-gradient(to right, red, blue); 这行是给背景设置为渐变色，这里注意一点，这样是简写了，其实是给background-image 设置为渐变色，不是 background-color ，是背景图 取值为渐变色，如果不知道渐变色，直接到这里看，
CSS3 渐变（Gradients）
-webkit-background-clip: text; 这行就要说到，background-clip 属性了 ，我们来看看 W3Cschool 上的说明
background-clip 属性 规定背景的绘制区域
语法 background-clip: border-box|padding-box|content-box;
上面没有说取值 text 的情况，看到前面的前缀，大家应该也能想到，它的兼容性问题了，目前还不是能所有浏览器都支持。
取值为text的意思，就是以区块内的文字作为裁剪区域向外裁剪，文字的背景即为区块的背景，文字之外的区域都将被裁剪掉。
所以，我们最后写color: transparent; 让文字为透明色，就是让后面背景色显示出来。
方式二
效果图
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
span {
background: linear-gradient(to right, red, blue);
-webkit-background-clip: text;
color: transparent;
}
</style>
</head>
<body>
<span>前端简单说</span>
</body>
</html>代码也不多，我们简单说一下，
:before 选择器向选定的元素 前 插入内容。
使用content 属性来指定要插入的内容。
content取值 attr 就是用来获取属性值的，content:attr(属性名);
content: attr(text); 能获取到元素的 text 属性，这里的这个text属性是自己自定义的一个属性，你也可以在元素中加一个 tt 属性，像这样 <h1 tt="前端简单说">前端简单说</h1>
然后content属性 这样写，content: attr(tt);
Rendering
nbsp;html>
<meta>
<style>
h1{
position: relative;
color: yellow;
}
h1:before{
content: attr(text);
position: absolute;
z-index: 10;
color:pink;
-webkit-mask:linear-gradient(to left, red, transparent );
}
</style>
<h1>前端简单说</h1>
Der Code ist nicht viel, lass uns kurz darüber reden,
:before selector fügt Inhalt vor dem ausgewählten Element ein. Verwenden Sie das Inhaltsattribut, um den einzufügenden Inhalt anzugeben.
content value attr wird verwendet, um den Attributwert abzurufen. content:attr (attribut name);
content: attr(text); kann hier das Textattribut des Elements abrufen Das Textattribut ist ein selbstdefiniertes Attribut. Sie können dem Element auch ein tt-Attribut hinzufügen, wie folgt:
<h1 tt="Front-end in Kürze">Front-end in Kürze</h1> Dann wird das Inhaltsattribut so geschrieben: content: attr(tt); Es wird auch funktionieren. Okay, reden wir weiter über den Schwerpunkt der zweiten Methode, das Maskenattribut, denn wir haben bereits einen Artikel geschrieben, in dem das Maskenattribut vorgestellt wird.
Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung von zwei Möglichkeiten, mit reinem CSS Textverlaufsfarben zu erzielen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!