¿Cómo cambiar la transparencia del texto en HTML / CSS?

112

Soy muy nuevo en HTML / CSS y estoy tratando de mostrar un texto como 50% transparente. Hasta ahora tengo el HTML para mostrar el texto con total opacidad

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

Sin embargo, no estoy seguro de cómo cambiar su opacidad. Intenté buscar en línea, pero no estoy seguro de qué hacer con el código que encuentro.

html css opacity Nosrettap
fuente

Respuestas:

268

opacityse aplica a todo el elemento, por lo que si tiene un fondo, borde u otros efectos en ese elemento, también se volverán transparentes. Si solo desea que el texto sea transparente, use rgba.

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

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

Además, conduzca lejos, muy lejos de <font>. Tenemos CSS para eso ahora.

Mattias Buelens
fuente
8
Una solución muy superior en comparación con la respuesta aceptada, en mi opinión. No es necesario agregar un elemento de extensión adicional al HTML para aplicar opacidad únicamente al texto.
kinsho
Esta es la solucion.
GhitaB
¿Qué navegadores son "antiguos" en este sentido?
Rick Davies
1
@RickDavies Según caniuse.com , se requiere IE9 o superior. Si necesita admitir IE8, aún necesita el respaldo. De lo contrario, debería estar bien con solo rgba.
Mattias Buelens
Hmmmm, tampoco lo es la propiedad de opacidad. Guau.
trusktr
105

Verifique la opacidad , puede establecer esta propiedad css en el div, <p>o con el uso <span>que desee hacer transparente

Y, por cierto, la etiqueta de fuente está en desuso , use css para diseñar el texto

div {
    opacity: 0.5;
}

Editar: este código hará que todo el elemento sea transparente, si desea que ** solo el texto ** sea transparente, verifique la respuesta de @Mattias Buelens

Mario Corchero
fuente
16
¡Usa el <span>, Luke!
Pilau
20
Esta respuesta es incorrecta. Su código hace que todo el elemento (div) sea translúcido. La Pregunta especificó solo el texto. La respuesta del hermano más votada debería ser la aceptada.
Basil Bourque
Gracias. Realmente me ayudó a ocultar un texto en mi plantilla de wordpress. En lugar de (opacidad: 0.5;) acabo de usar (opacidad: 0;).
Marcielli Oliveira
17

Simplemente use la rgbaetiqueta como su color de texto. Podría usar opacity, pero eso afectaría a todo el elemento, no solo al texto. Digamos que tiene un borde, también lo haría transparente.

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

Su mejor solución es mirar la etiqueta "opacidad" de un elemento.

Por ejemplo:

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

Entonces, en su caso, debería verse así:

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

Sin embargo, no olvide que la etiqueta no es compatible con HTML5.

También deberías usar un CSS :)

MajuiF
fuente
5

¿Qué pasa con el opacityatributo css ? 0a los 1valores.

Pero probablemente necesite utilizar un elemento dom más explícito que "font". Por ejemplo:

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

Como información adicional, por supuesto, le sugiero que use declaraciones CSS fuera de sus elementos html, pero también intente usar el estilo de fuente css en lugar de la etiqueta de fuente html.

Para el generador de estilos css3 entre navegadores, eche un vistazo a http://css3please.com/

Sebas
fuente
3

¡Fácil! despues de ti:

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

agregue este: 

    <font style="opacity:.6">

solo tienes que cambiar el ".6" por un número decimal entre 1 y 0

usuario3067297
fuente
3

No existe una propiedad CSS como background-opacity que pueda usar solo para cambiar la opacidad o transparencia del fondo de un elemento sin afectar los elementos secundarios, por otro lado, si intenta usar la propiedad de opacidad CSS, no solo cambiará la opacidad del fondo, pero también cambia la opacidad de todos los elementos secundarios. En tal situación, puede usar el color RGBA introducido en CSS3 que incluye transparencia alfa como parte del valor del color. Con el color RGBA puede establecer el color del fondo y su transparencia.

Estoy en
fuente
2

tratar de jugar con mix-blend-mode: multiply;

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

MDN

tutorial

Dmitry Grinko
fuente