CSSでさまざまな色のテキストを実現する方法-フロントエンドQ&A-php.cn

CSSでさまざまな色のテキストを実現する方法

青灯夜游

リリース： 2022-08-30 18:47:10

オリジナル

4555 人が閲覧しました

2 つの方法: 1. 背景クリップを使用します。構文は「テキスト要素 {背景画像: 線形グラデーション(..); 背景クリップ: テキスト; カラー: 透明;}」です。 2. マスクを使用します。構文は「テキスト要素 {color: カラー値 1;} テキスト要素: before {mask: Linear-gradient(..); color: カラー値 2;}」です。

CSSでさまざまな色のテキストを実現する方法

このチュートリアルの動作環境: Windows 7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。

CSS では、テキスト要素にグラデーション効果を追加することで、さまざまな色のテキストを実現できます。以下に、テキストのグラデーション効果を実現する 2 つの方法を紹介します。

方法 1: Linear-gradient() 背景クリップ

CSS に直接設定するプロパティはありませんテキストのグラデーション。通常、テキストは単色のみです。ただし、背景クリッピングを使用して、テキスト領域に背景色を表示し、テキストにグラデーションがあるように見せることができます。

レンダリング

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 属性は、背景

構文
background-clip: border-box|padding-box|content-box;

CSSでさまざまな色のテキストを実現する方法 ##上記では text の値については言及されていません。前の接頭辞を見ると、これには互換性の問題があり、現在すべてのブラウザでサポートされているわけではないと考える必要があります。

text の値は、ブロック内のテキストが外側にトリミングされるトリミング領域として使用されることを意味します。テキストの背景はブロックの背景となり、テキストの外側の領域はトリミングされます。

そこで、最後に

color:transparent;

と書いてテキストを透明にします。つまり、テキストの背後にある背景色が表示されます。

方法 2: Linear-gradient() マスク

##レンダリング

CSSでさまざまな色のテキストを実現する方法コード

<!doctype html>
<html>
<head>
<meta charset="UTF-8" />

<style type="text/css">
    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>
</style>
</head>

<body>
    <h1 text="前端简单说">前端简单说</h1>
</body>

</html>

ログイン後にコピー

コードはそれほど多くはありません。簡単に説明します。

:選択されたコンテンツの挿入へのセレクターの前要素の前。

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