ホームページ > 記事 > ウェブフロントエンド > 純粋な CSS を使用してテキストのグラデーションカラーを実現する 2 つの方法の詳細な説明
純粋な CSS を使用してテキストのグラデーションカラーを実現する 2 つの方法の詳細な説明
- 青灯夜游転載
- 2021-04-23 19:19:403673ブラウズ
この記事では、純粋な CSS を使用してテキストのグラデーション カラーを実現する 2 つの方法を紹介します。一定の参考値があるので、困っている友達が参考になれば幸いです。
説明
今回は 2 つの属性、
背景属性 # # に焦点を当てます。
- #マスク属性
方法 1
レンダリング
コード
<!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>あまり多くのコードはありません。見てみましょう。
background: Linear-gradient(to right, red, blue);これline 背景のグラデーションカラーを設定します。略語であることに注意してください。実際には、background-color ではなく、background-image のグラデーションカラーを設定しますが、背景画像の値です。これはグラデーション カラーです。グラデーション カラーがわからない場合は、ここにアクセスして確認してください。CSS3 Gradient (Gradients)
-webkit-background -clip: text; この行は、background-clip 属性について説明します。W3Cschool の説明を見てみましょう
構文
background -clip: border-box|padding-box|content-box;
color:transparent; と書いてテキストを透明にします。つまり、テキストの背後にある背景色が表示されます。
方法 2
レンダリング
コード
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>
あまり多くのコードはありません。#:before selector が選択された要素の前にコンテンツを挿入する前に、それについて簡単に説明します。
content 属性を使用して、挿入するコンテンツを指定します。content: attr(text);
content value attr は属性値を取得するために使用されます。content:attr(attribute name);
は要素のテキスト属性を取得できます。 。ここでの text 属性はカスタム属性です。
フロントエンドの概要
次に、content 属性を次のように記述します。 content: attr(tt);
これも機能します。
ここでは詳しく紹介しませんが、詳しく知りたい人は上記の記事を読んでみてください。
簡単に言えば、マスク属性を使用すると、要素の特定の部分を表示または非表示にすることができます。
今回はこの2つの方法です分かりやすいと思いますので、皆様のお役に立てれば幸いです。
プログラミング関連の知識について詳しくは、
プログラミング入門以上が純粋な CSS を使用してテキストのグラデーションカラーを実現する 2 つの方法の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。