Comparaison de deux méthodes pour l'échange d'effet de texte dégradé CSS

Voulez-vous créer un texte de titre dégradé sans utiliser Photoshop ? Voici une technique CSS simple pour vous montrer comment créer cet effet en utilisant uniquement des images CSS et png. Cette méthode a été testée pour être adaptée à la plupart des courants. Bien sûr, IE6 nécessite un hack prenant en charge le PNG transparent (Heureusement, Microsoft travaille dur pour mettre automatiquement à niveau IE6 des utilisateurs vers IE7^.^, lecture complémentaire : Attention : une mise à jour automatique d'IE7 arrive bientôt) Avantages Il s'agit d'une astuce purement CSS, sans utiliser de script ja ou flash, et elle peut fonctionner normalement sur la plupart des navigateurs (IE6 nécessite un hack prenant en charge le PNG transparent) C'est le titre parfait design, vous n'avez pas besoin d'utiliser Photoshop, ce qui vous fera gagner beaucoup de bande passante et de temps Vous pouvez utiliser cet effet avec n'importe quelle police Web, et la taille de la police est également variable Il comment ça marche. travail ? L'astuce est très simple. Nous utilisons simplement un png transparent de 1px de large sur le texte html Texte dégradé CSS CSS La clé est ici : h1 { position : relative } h1 span { position : absolue } h1 { police : gras 330%/100% "Lucida Grande" ; position : relative couleur : } h1 span { arrière-plan : url (gradient.png) répéter- x; position: absolue; display: block; width: 100% height: 31px; C'est ça, tu l'as fait ^_^; Cliquez ici pour voir l'exemple. Activez-le pour prendre en charge IE6 Le hack suivant permet simplement à IE6 de prendre en charge les images transparentes au format PNG-24 . h1 span { background:none; h1 span { background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='gradient.png', sizingMethod='scale'); } filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='gradient.png', sizingMethod='scale') } Version générée par jQuery Si vous ne voulez pas avoir de balises vides dans votre code, vous pouvez utiliser javascript pour le générer dynamiquement. Voici une méthode de production jquery simple $(document).ready(function(){ //prepend span tag to H1 $("h1").prepend(" "); }); Téléchargement du package DEMO.