ホームページ >ウェブフロントエンド >CSSチュートリアル >純粋な CSS を使用してテキストのグラデーションカラーを実現する 2 つの方法の詳細な説明
この記事では、純粋な CSS を使用してテキストのグラデーション カラーを実現する 2 つの方法を紹介します。一定の参考値があるので、困っている友達が参考になれば幸いです。
今回は 2 つの属性、
背景属性 # # に焦点を当てます。
レンダリング
コード
<!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; と書いてテキストを透明にします。つまり、テキストの背後にある背景色が表示されます。
レンダリング
コード
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 のマスクについて簡単に説明しましょう。マスクイメージの使い方 ここでは詳しく紹介しませんが、詳しく知りたい人は上記の記事を読んでみてください。
簡単に言えば、マスク属性を使用すると、要素の特定の部分を表示または非表示にすることができます。
プログラミング関連の知識について詳しくは、
プログラミング入門以上が純粋な CSS を使用してテキストのグラデーションカラーを実現する 2 つの方法の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。