1

saludos, tengo este codigo

background-color: rgb(0, 0, 0);
opacity: 0.102;

que me permite que el formulario sea transparente ya que de fondo hay una imagen y un gradiente colocado de esta forma

background:url('dirección de imagen'),gradiente;

y se genera el efecto de deseado, el problema es que el texto dentro de los inputs en el formulario también se vuelven transparente y es difícil verlo, pueden ayudarme?

2
  • el form esta dentro de un div,, el div tiene la imagen y el gradiente. entonces a form le aplico la opacidad para que se pueda ver el fondo el 25 mar. 2017 a las 19:39
  • Recuerda que si alguna de las respuestas recibidas ha solucionado tu problema se espera que la marques como "aceptada"
    – Marcos
    el 31 mar. 2017 a las 19:19

3 respuestas 3

3

Si no he entendido mal tu pregunta, puedes utilizar un selector para los input dentro del formulario. Por ejemplo, si tu formulario usa la clase cFormulario, podrías utilizar la siguiente declaración en css:

form.cFormulario input[type=text]{
  opacity: 1;
}

Adicionalmente, quizás te interese redondear un poco los input text o incluir algún borde para que el contraste con el fondo sea mayor.

Espero haberte ayudado. ¡Saludos!

5
  • Este método no funciona, mira esta demo
    – Marcos
    el 25 mar. 2017 a las 19:01
  • Hola Marcos, no termino de entender por qué dices que no funciona... "el problema es que el texto dentro de los inputs en el formulario también se vuelven transparente y es difícil verlo". Una opción es hacer los input text visibles... Si lo que quiere Michel es mantener la transparencia en el input pero no en el texto quizás debiera haber sido más específico en la pregunta.
    – José L.
    el 25 mar. 2017 a las 19:21
  • Yo entendí que el formulario tiene opacity: 0.102, y que esto provoca que el texto dentro de los inputs se vea transparente. ¿Podrías crear un sinppet donde se vea que tu solución funciona?
    – Marcos
    el 25 mar. 2017 a las 19:25
  • Hola José, quizas no supe formular bien la pregunta, lo que necesito es que se vea el texto dentro del input el 25 mar. 2017 a las 19:26
  • No hay problema Michel, la solución que porta Marcos parece que sí se ajusta a lo que pides. Marcos gracias por tu fiddle puntualizando :)
    – José L.
    el 25 mar. 2017 a las 19:40
2

Cuando se añade opacity a un elemento, todos sus hijos heredan esa opacidad. Puedes darle la transparencia que deseas al formulario y al input especificando su background-color con rgba.

Código:

form,input {
	background-color: rgba(222, 215, 215, 0);            
}
input{
	border: none;
	border-bottom: 2px solid rgba(222, 215, 215, 0.38);
}
div{
	border: 2px solid black; 
	background-image: url(
		"https://www.solofondos.com/wp-content/uploads/2015/11/fondo-celeste-oscuro-6269.jpg"
	);
	width: 100%;
	height: 200px;
	padding: 20px;
}
<form>
	<div>
		<label>Nombre: <input/></label><br/>
		<label>Apellido: <input/></label><br/>
		<label>E-mail: <input/></label><br/>
	</div>
</form>

1

Podrías solucionarlo así:

  • Crea un pseudo-elemento para crear un layer con el color de fondo y la transparencia.

Ejemplo:

body {
  background-image: url('http://placekitten.com/1500/1000');
}
form {
  padding: 10px;
  position: relative;
}
form:before {
  content: ' ';
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0.102;
  background-color: rgb(0,0,0);
}
form label {
  position: relative;
}
form input {
  background: transparent;
}
<form>
  <label>
    Nombre: <input/>
  </label><br/>
  <label>
    Apellido: <input/>
  </label><br/>
  <label>
    E-mail: <input/>
  </label><br/>
</form>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.