transparente texto sobre semitransparente opaco fondo con caja html css opacity

html - caja - texto opaco sobre fondo semitransparente con css



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

¡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

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 exactamente con el código que encuentro.


¿Qué pasa con el atributo de opacity css? 0 a 1 valores

Pero entonces probablemente necesites usar 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, sugiero que use declaraciones CSS fuera de los elementos html, pero también intente utilizar el estilo font css en lugar de la fuente html.

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


Compruebe la Opacity , puede establecer esta propiedad css en div, <p> o usar <span> para hacer transparente

Y por cierto, la etiqueta de fuente está en deprecated , use CSS para darle un estilo al texto

div { opacity: 0.5; }

Editar: Este código hará que todo el elemento sea transparente, si desea que ** solo el texto ** se vea transparente @Mattias Buelens responda


No hay ninguna propiedad de CSS como fondo-opacidad 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 de 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. Usando el color RGBA puede establecer el color del fondo así como su transparencia.


Simplemente use la etiqueta rgba 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, eso también lo haría transparente.

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


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

Por ejemplo:

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

Entonces, en tu caso, debería verse algo así como:

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

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

Deberías usar un CSS también :)


opacity aplica a todo el elemento, por lo que si tiene un fondo, borde u otros efectos en ese elemento, estos también se volverán transparentes. Si solo quiere 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, diríjase lejos, muy lejos de <font> . Tenemos CSS para eso ahora.