Trois façons d'implémenter le dégradé de couleurs du texte CSS (avec code)-tutoriel CSS-php.cn

Trois façons d'implémenter le dégradé de couleurs du texte CSS (avec code)

不言

Libérer： 2018-11-15 17:37:38

avant

4566 Les gens l'ont consulté

Ce que cet article vous apporte concerne les trois méthodes d'implémentation du dégradé de couleurs de texte CSS (avec code). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Dans le processus de développement du front-end Web, les concepteurs d'interface utilisateur conçoivent souvent des dessins de conception avec du texte dégradé. Dans le passé, nous ne pouvions utiliser que des images png pour remplacer le texte. Aujourd'hui, nous pouvons utiliser du CSS pur pour l'implémenter. texte dégradé. Voici 3 méthodes de mise en œuvre pour votre référence !

Style de base :

.gradient-text{text-align: left;text-indent:30px;line-height: 50px;font-size:40px;font-weight:bolder; position: relative; }

Copier après la connexion

La première méthode, utilisez background-cli, text-fill-color :

.gradient-text-one{  
    background-image:-webkit-linear-gradient(bottom,red,#fd8403,yellow); 
    -webkit-background-clip:text; 
    -webkit-text-fill-color:transparent; 
}

Copier après la connexion

Instructions :

background: -webkit-linear-gradient(...) fournit un arrière-plan dégradé pour les éléments de texte.
webkit-text-fill-color: transparent Remplit le texte avec une couleur transparente.
webkit-background-clip : le texte coupe l'arrière-plan avec du texte et remplit le texte avec l'arrière-plan dégradé comme couleur.

La deuxième méthode consiste à utiliser mask-image :

.gradient-text-two{
   color:red;
}
.gradient-text-two[data-content]::after{
    content:attr(data-content);
    display: block;
    position:absolute;
    color:yellow;
    left:0;
    top:0;
    z-index:2;
    -webkit-mask-image:-webkit-gradient(linear, 0 0, 0 bottom, from(yellow), to(rgba(0, 0, 255, 0)));
}

Copier après la connexion

Explication :

mask-image est la même que background-image. Non seulement la valeur peut être. le chemin de l'image, il peut également s'agir d'un dégradé de couleur.

La troisième méthode, utilisez LinearGradient, fill :

.gradient-text-three{
    fill:url(#SVGID_1_);
    font-size:40px;
    font-weight:bolder;
}

Copier après la connexion

<svg viewBoxs="0 0 500 300" class="svgBox">
    <defs>
        <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="0" y1="10" x2="0" y2="50">
            <stop  offset="0" style="stop-color:yellow"/>
            <stop  offset="0.5" style="stop-color:#fd8403"/>
            <stop  offset="1" style="stop-color:red"/>
        </linearGradient>
    </defs>
    <text text-anchor="middle" class="gradient-text-three" x="110px" y="30%">花信年华</text>
</svg>

Copier après la connexion

Explication :

En SVG, il existe deux principaux types de dégradés :

Dégradé linéaire (linearGradient)
Dégradé radial (radialGradient)
Le dégradé en SVG peut être utilisé non seulement pour remplir des éléments graphiques, mais également pour remplir des éléments de texte

exemple dom :

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>CSS3渐变字体</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <style type="text/css">
        *{margin:0;padding:0;}
        body,html{width:100%;height:100%;}
        .wrapper{width:80%;margin:0 auto;margin-top:30px;}
        .gradient-text{text-align: left;text-indent:30px;line-height: 50px;font-size:40px;font-weight:bolder; position: relative; }
        .gradient-text-one{  
            background-image:-webkit-linear-gradient(bottom,red,#fd8403,yellow); 
            -webkit-background-clip:text; 
            -webkit-text-fill-color:transparent; 
        }
        .gradient-text-two{
            color:red;
        }
        .gradient-text-two[data-content]::after{
            content:attr(data-content);
            display: block;
            position:absolute;
            color:yellow;
            left:0;
            top:0;
            z-index:2;
            -webkit-mask-image:-webkit-gradient(linear, 0 0, 0 bottom, from(yellow), to(rgba(0, 0, 255, 0)));
        }
        .gradient-text-three{
            fill:url(#SVGID_1_);
            font-size:40px;
            font-weight:bolder;
        }
    </style>
</head>
<body>
    <section class="wrapper">
        <p class="panel panel-info">
            <p class="panel-heading">
                <h3 class="panel-title">方法1. background-clip + text-fill-color</h3>
            </p>
            <p class="panel-body">
                <h3 class="gradient-text gradient-text-one">花样年华</h3>
            </p>
        </p>
        <p class="panel panel-warning">
            <p class="panel-heading">
                <h3 class="panel-title">方法2. mask-image</h3>
            </p>
            <p class="panel-body">
                <h3 class="gradient-text gradient-text-two" data-content="豆蔻年华">豆蔻年华</h3>
            </p>
        </p>
        <p class="panel panel-danger">
            
            <p class="panel-heading">
                <h3 class="panel-title">方法3. svg linearGradient</h3>
            </p>
 
            <p class="panel-body">
                <svg viewBoxs="0 0 500 300" class="svgBox">
                    <defs>
                        <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="0" y1="10" x2="0" y2="50">
                            <stop  offset="0" style="stop-color:yellow"/>
                            <stop  offset="0.5" style="stop-color:#fd8403"/>
                            <stop  offset="1" style="stop-color:red"/>
                        </linearGradient>
                    </defs>
                    <text text-anchor="middle" class="gradient-text-three" x="110px" y="30%">花信年华</text>
                </svg>
            </p>
 
        </p>
    </section>
</body>
</html>

Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!