Comment changer la transparence du texte en HTML / CSS?

112

Je suis très novice en HTML / CSS et j'essaie d'afficher du texte comme 50% transparent. Jusqu'à présent, j'ai le HTML pour afficher le texte avec une opacité totale

<html><font color=\"black\" face=\"arial\" size=\"4\">THIS IS MY TEXT</font></html>

Cependant, je ne sais pas comment modifier son opacité. J'ai essayé de chercher en ligne, mais je ne sais pas exactement quoi faire avec le code que je trouve.

html css opacity Nosrettap
la source

Réponses:

268

opacitys'applique à l'ensemble de l'élément, donc si vous avez un arrière-plan, une bordure ou d'autres effets sur cet élément, ceux-ci deviendront également transparents. Si vous souhaitez uniquement que le texte soit transparent, utilisez rgba.

#foo {
    color: #000; /* Fallback for older browsers */
    color: rgba(0, 0, 0, 0.5);

    font-size: 16pt;
    font-family: Arial, sans-serif;
}

Aussi, dirigez-vous loin, très loin de <font>. Nous avons CSS pour cela maintenant.

Mattias Buelens
la source
8
Une solution bien supérieure par rapport à la réponse acceptée, l'OMI. Il n'est pas nécessaire d'ajouter un élément span supplémentaire au HTML pour appliquer l'opacité uniquement au texte.
kinsho
Telle est la solution.
GhitaB
quels navigateurs sont "anciens" dans ce sens?
Rick Davies
1
@RickDavies Selon caniuse.com , IE9 ou supérieur est requis. Si vous devez prendre en charge IE8, vous avez toujours besoin de la solution de secours. Sinon, vous devriez être d'accord avec juste rgba.
Mattias Buelens
Hmmmm, la propriété d'opacity ne l'est pas non plus. Sensationnel.
trusktr
105

Vérifiez l' opacité , vous pouvez définir cette propriété css sur le div, le <p>ou en utilisant que <span>vous souhaitez rendre transparent

Et au fait, la balise font est obsolète , utilisez css pour styliser le texte

div {
    opacity: 0.5;
}

Edit: Ce code rendra tout l'élément transparent, si vous voulez rendre ** juste le texte ** transparent check @Mattias Buelens answer

Mario Corchero
la source
16
Utilisez le <span>, Luke!
pilau
20
Cette réponse est incorrecte. Son code rend l'élément entier (div) translucide. La question ne spécifiait que le texte. La réponse fraternelle la plus votée devrait être celle acceptée.
Basil Bourque
Je vous remercie. Cela m'a vraiment aidé à cacher un texte dans mon modèle wordpress. Au lieu de (opacity: 0.5;) je viens d'utiliser (opacity: 0;).
Marcielli Oliveira
17

Utilisez simplement la rgbabalise comme couleur de texte. Vous pourriez utiliser opacity, mais cela affecterait l'élément entier, pas seulement le texte. Disons que vous avez une frontière, cela rendrait cela transparent également.

.text
    {
        font-family: Garamond, serif;
        font-size: 12px;
        color: rgba(0, 0, 0, 0.5);
    }
Harry Escott
la source
9

Votre meilleure solution est de regarder la balise "opacity" d'un élément.

Par exemple:

.image
{
    opacity:0.4;
    filter:alpha(opacity=40); /* For IE8 and earlier */
}

Donc, dans votre cas, cela devrait ressembler à quelque chose comme:

<html><span style="opacity: 0.5;"><font color=\"black\" face=\"arial\" size=\"4\">THIS IS MY TEXT</font></html>

Cependant, n'oubliez pas que la balise n'est pas prise en charge dans HTML5.

Vous devriez aussi utiliser un CSS :)

MajuiF
la source
5

Qu'en est-il de l' opacityattribut css ? 0aux 1valeurs.

Mais alors vous devez probablement utiliser un élément dom plus explicite que "font". Par exemple:

<html><body><span style=\"opacity: 0.5;\"><font color=\"black\" face=\"arial\" size=\"4\">THIS IS MY TEXT</font></span></body></html>

Comme information supplémentaire, je vous suggère bien sûr d'utiliser des déclarations CSS en dehors de vos éléments html, mais aussi d'essayer d'utiliser le style font css au lieu de la balise html font.

Pour le générateur de styles css3 cross browser, jetez un œil à http://css3please.com/

Sebas
la source
3

Facile! après votre:

    <font color=\"black\" face=\"arial\" size=\"4\">

ajoutez celui-ci: 

    <font style="opacity:.6">

il suffit de changer le ".6" pour un nombre décimal compris entre 1 et 0

user3067297
la source
3

Il n'y a pas de propriété CSS comme background-opacity que vous pouvez utiliser uniquement pour changer l'opacité ou la transparence de l'arrière-plan d'un élément sans affecter les éléments enfants, par contre si vous essayez d'utiliser la propriété CSS opacity, cela ne changera pas seulement le l'opacité de l'arrière-plan mais modifie également l'opacité de tous les éléments enfants. Dans une telle situation, vous pouvez utiliser la couleur RGBA introduite dans CSS3 qui inclut la transparence alpha dans le cadre de la valeur de couleur. En utilisant la couleur RGBA, vous pouvez définir la couleur de l'arrière-plan ainsi que sa transparence.

Je suis dessus
la source
2

essayer de jouer avec mix-blend-mode: multiply;

color: white;
background: black;
mix-blend-mode: multiply;

MDN

Didacticiel

Dmitry Grinko
la source