web-dev-qa-db-fra.com

Comment changer la transparence du texte en HTML/CSS?

Je suis très novice en HTML/CSS et j'essaie d'afficher du texte transparent à 50%. Jusqu'à présent, j'ai le code 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 changer son opacité. J'ai essayé de chercher en ligne, mais je ne sais pas exactement quoi faire avec le code que je trouve.

htmlcssopacity
83
Nosrettap

Vérifiez Opacité , vous pouvez définir cette propriété css sur la div, le <p> ou à l'aide de <span> que vous souhaitez rendre transparent

Et au fait, la balise font deprecated , utilisez css pour styliser le texte

div {
    opacity: 0.5;
}

Edit: Ce code rendra l’ensemble de l’élément transparent, si vous voulez faire ** seulement le texte ** vérifier transparent @Mattias Buelens answer

84
Mario Corchero

opacity s'applique à tout l'élément. Par conséquent, si vous avez un effet d'arrière-plan, une bordure ou autre sur cet élément, ceux-ci deviennent également transparents. Si vous seulement voulez 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;
}

En outre, dirigez-vous loin, loin de <font>. Nous avons CSS pour cela maintenant.

223
Mattias Buelens

Utilisez simplement la balise rgba comme couleur de texte. Vous pouvez utiliser opacity, mais cela affecterait l’ensemble de l’élément, pas seulement le texte. Supposons que vous ayez une frontière, cela rendrait également cette transparence. 

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

Votre meilleure solution consiste à examiner la balise "opacité" 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 en HTML5.

Vous devriez aussi utiliser un CSS :)

9
MajuiF

Qu'en est-il de l'attribut css opacity? 0 à 1 valeurs.

Mais vous devrez 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>

Bien entendu, je vous suggère également d’utiliser des déclarations CSS en dehors de vos éléments html, mais essayez également d’utiliser le style font css au lieu de la balise html de la police.

Pour le générateur de styles css3 inter-navigateurs, consultez http://css3please.com/

3
Sebas

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

3
user3067297

Il n'y a pas de propriété CSS comme opacité de fond que vous pouvez utiliser uniquement pour modifier 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é d'opacité CSS cela changera non seulement l'opacité de l'arrière-plan, mais également l'opacité de tous les éléments enfants . Dans ce cas, vous pouvez utiliser la couleur RGBA introduite dans CSS3 qui inclut la transparence alpha dans la valeur de la couleur. En utilisant la couleur RGBA, vous pouvez définir la couleur de l’arrière-plan ainsi que sa transparence.

2
Imon

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

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

MDN

Didacticiel

1
Dmitry Grinko