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.
Réponses:
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.
rgba.
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
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);
}
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 :)
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/
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
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.
essayer de jouer avec mix-blend-mode: multiply;
color: white;
background: black;
mix-blend-mode: multiply;