tamaño - fuentes html para web

¿Cómo se hace que la opacidad de un campo de entrada no afecte al color del texto dentro de él?

Question

Tengo una imagen de fondo oscura / negra y un campo de entrada blanco. Le di al campo de entrada una opacidad del 50% y quiero que el texto / valor sea blanco fijo (#fff). PERO cuando aplico la opacidad, afecta tanto el fondo del elemento de entrada como el texto. ¿Cómo solo cambio el fondo del campo de entrada?

Answer 1

¿Por qué no simplemente hacer un png medio transparente y utilizarlo como imagen de fondo en lugar de establecer la opacidad de entrada? O si no tiene que ser compatible con IE8, también puede usar rgba () .

Answer 2

El problema es que estás cambiando la opacidad en todo el elemento. Como tal, todos los elementos secundarios heredan estrictamente las propiedades transparentes.

Hay algunas cosas que puedes hacer.

1. Puede orientar solo el fondo y establecerlo en un valor RGBA:

   background: rgba(255, 255, 255, 0.5);

   Esto no funcionará en IE8 y versiones anteriores, por lo que puede usar una solución alternativa utilizando filtros de gradiente lineal:

   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=''#80ffffff'', endColorstr=''#80ffffff'',GradientType=0 );

   Notarás que los primeros 2 lugares hexadecimales son # 80. Esto no es un error y no es un valor decimal. Hexadecimal es base 16, esto convierte al # 80 en el punto medio, por lo tanto, establece su opacidad al 50%. Es un poco confuso, lo sé!

2. Puede eliminar el estilo del campo de entrada y, en su lugar, agregar un envoltorio alrededor de los campos de entrada y cambiar el estilo en su lugar.

3. Puede usar un PNG semitransparente como imagen de fondo y configurarlo para que se repita.

Answer 3

Por lo que dices, solo quieres que el fondo se vea afectado.

Para que los fondos sean (parcialmente) transarentes, debes usar un

a) Fondo PNG

o

b) un fondo de RGBa: consulte https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#rgba ()

Como que sí: background:rgba(0,0,0,0.2);

Esto no es compatible con IE8 y abajo.

Answer 4

Para eso podrías usar background-color: rgba(0, 0, 0, 0.5) . Los primeros tres números son el color de fondo en formato rgb (rojo, verde, azul) y el cuarto número es el nivel de opacidad en una escala de 0 a 1.