ホームページ > 記事 > ウェブフロントエンド > CSSでさまざまな色のテキストを実現する方法
CSSでさまざまな色のテキストを実現する方法
- 青灯夜游オリジナル
- 2022-08-30 18:47:104552ブラウズ
2 つの方法: 1. 背景クリップを使用します。構文は「テキスト要素 {背景画像: 線形グラデーション(..); 背景クリップ: テキスト; カラー: 透明;}」です。 2. マスクを使用します。構文は「テキスト要素 {color: カラー値 1;} テキスト要素: before {mask: Linear-gradient(..); color: カラー値 2;}」です。
このチュートリアルの動作環境: Windows 7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。
CSS では、テキスト要素にグラデーション効果を追加することで、さまざまな色のテキストを実現できます。以下に、テキストのグラデーション効果を実現する 2 つの方法を紹介します。
方法 1: Linear-gradient() 背景クリップ
CSS に直接設定するプロパティはありませんテキストのグラデーション。通常、テキストは単色のみです。ただし、背景クリッピングを使用して、テキスト領域に背景色を表示し、テキストにグラデーションがあるように見せることができます。
レンダリング
##コード
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.text {
background-image: linear-gradient(to right, red, blue);
background-clip: text;
-webkit-background-clip: text;
color: transparent; /*需要文字透明*/
}
</style>
</head>
<body>
<h1 class="text">为你定制 发现精彩</h1>
</body>
</html>コードはあまり多くありません。 a look:
background: Linear-gradient(to right, red, blue); この行は、背景をグラデーション カラーに設定します。これは略語であることに注意してください。実際には、 background-color ではなく、background-image がグラデーション カラーに設定されていますが、背景画像がグラデーション カラーに設定されています。
-webkit-background-clip: text; この行では、background-clip 属性について説明します:
構文
background-clip: border-box|padding-box|content-box;
##上記では text の値については言及されていません。前の接頭辞を見ると、これには互換性の問題があり、現在すべてのブラウザでサポートされているわけではないと考える必要があります。
text の値は、ブロック内のテキストが外側にトリミングされるトリミング領域として使用されることを意味します。テキストの背景はブロックの背景となり、テキストの外側の領域はトリミングされます。
そこで、最後に
color:transparent; と書いてテキストを透明にします。つまり、テキストの背後にある背景色が表示されます。
方法 2: Linear-gradient() マスク
コード
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>
コードはそれほど多くはありません。簡単に説明します。:選択されたコンテンツの挿入へのセレクターの前要素の前。 content 属性を使用して、挿入するコンテンツを指定します。
content value attr は属性値を取得するために使用されます。content:attr(attribute name);
content: attr(text);
は要素のテキスト属性を取得できます。 。ここでの text 属性はカスタム属性です。<h1 tt="フロントエンドの概要">フロントエンドの概要 </h1>
次に、content 属性を次のように記述します。 content: attr(tt); これも機能します。 さて、2 番目のメソッドの焦点であるマスク属性について話を続けましょう。次の記事を参照してください: https://www.php.cn/css-tutorial-494998.html
2 番目の方法の原理は、図簡単に言えば、マスク属性を使用すると、要素の特定の部分を表示または非表示にすることができます。
(学習ビデオ共有: 
Web フロントエンドを始める) を見ることで理解できます。
以上がCSSでさまざまな色のテキストを実現する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。