html - texto - ¿Es posible tener un elemento transparente y ver a través de su fondo opaco padre

opacidad imagen de fondo css

Question

Hola, estoy diseñando un formulario (HTML / CSS / JS) que muestra el contenido cuando el usuario quiere suscribirse o iniciar sesión. El fondo del formulario completo es de color opaco sólido, pero quiero que las entradas tengan un fondo transparente para que podamos ver el contenido detrás del formulario a través de él. No tengo ningún problema para establecer las entradas transparentes, pero no tengo idea de cómo puedo hacer que "pasen" por el color de fondo principal. Empiezo a pensar que eso es imposible solo con CSS. Puedo compartir el código pero es más como una pregunta genérica. Gracias

Answer 1

Eche un vistazo a esta solución, https://jsfiddle.net/bnnp2pvj/1/

var color = $(''.container'').css(''background-color'');
color = color.replace('')'', '', 0.2)'').replace(''rgb'', ''rgba'');
$(''.background-match'').css({"background-color":color});

Answer 2

Puedes hacer trampa haciendo que tu entrada parezca un recorte, usando algunos elementos más y un poco de creatividad ...

Ejemplo de trabajo

$(''.wrap'').draggable();// demo only, used to show off cutout effect. Not necessary 

.wrap {
position:absolute;
}
.top, .bottom {
background:grey;
}
input, .top, .bottom {
width: 100%;
border: 30px solid grey;
}
input {
background: transparent;
color: red;
border: 29px solid grey;
outline: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<div class="wrap">
<div class="top">This may be cheating, but it works...</div>
<input type="text" placeholder="testing"/>
<div class="bottom"></div>
</div>
<p>Zombie ipsum reversus ab viral inferno, nam rick grimes malum cerebro. De carne lumbering animata corpora quaeritis. Summus brains sit​​, morbo vel maleficia? De apocalypsi gorger omero undead survivor dictum mauris. Hi mindless mortuis soulless creaturas, imo evil stalking monstra adventus resi dentevil vultus comedat cerebella viventium. Qui animated corpse, cricket bat max brucks terribilem incessu zomby. The voodoo sacerdos flesh eater, suscitat mortuos comedere carnem virus. Zonbi tattered for solum oculi eorum defunctis go lum cerebro. Nescio brains an Undead zombies. Sicut malus putrid voodoo horror. Nigh tofth eliv ingdead. Cum horribilem walking dead resurgere de crazed sepulcris creaturis, zombie sicut de grave feeding iride et serpens. Pestilentia, shaun ofthe dead scythe animated corpses ipsa screams. Pestilentia est plague haec decaying ambulabat mortuos. Sicut zeder apathetic malus voodoo. Aenean a dolor plan et terror soulless vulnerum contagium accedunt, mortui iam vivam unlife. Qui tardius moveri, brid eof reanimator sed in magna copia sint terribiles undeath legionis. Alii missing oculis aliorum sicut serpere crabs nostram. Putridi braindead odores kill and infect, aere implent left four dead. Lucio fulci tremor est dark vivos magna. Expansis creepy arm yof darkness ulnis witchcraft missing carnem armis Kirkman Moore and Adlard caeruleum in locis. Romero morbo Congress amarus in auras. Nihil horum sagittis tincidunt, zombie slack-jawed gelida survival portenta. The unleashed virus est, et iam zombie mortui ambulabunt super terram. Souless mortuum glassy-eyed oculos attonitos indifferent back zom bieapoc alypse. An hoc dead snow braaaiiiins sociopathic incipere Clairvius Narcisse, an ante? Is bello mundi z?</p>

Answer 3

Sí, puedes, puedes usar mask

El soporte no es perfecto , pero el repliegue simplemente no es transparente, por lo que se degrada muy bien. Esto también mejorará con el tiempo.

Esto permitirá que todo lo que está detrás del elemento brille, color plano, textura, gradiente, elementos múltiples, imágenes o incluso video.

Además, mantiene el estilo en el css (y las imágenes) a donde pertenece.

He hecho un JSFiddle para demostrar , en realidad es bastante simple:

<div class="background">
<div class=''masked''>
</div>
</div>

El marcado está allí, el fondo contiene el elemento que se enmascarará. La máscara en sí es una imagen hecha de áreas negras de cualquier nivel de transparencia (incluso totalmente transparente). Aquí está:

Las formas de dos letras del cuadro son los bits transparentes que son donde el fondo arde hasta el primer plano. La barra en la parte inferior es 50% transparente y sirve para demostrar cómo se pueden usar los valores alfa.

El css está aquí:

.background {
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#959595), color-stop(46%,#0d0d0d), color-stop(50%,#010101), color-stop(53%,#0a0a0a), color-stop(76%,#4e4e4e), color-stop(87%,#383838), color-stop(100%,#1b1b1b));
width: 250px;
height: 250px;
float:left;
}
.masked {
background: #fff;
width: 200px;
margin: 25px;
height: 200px;
background-color: #4f6;
-webkit-mask-image: url(http://images.excitedstatelaboratory.com/mask-example-image-2.png);
}

Puede ver algunos elementos de posicionamiento y tamaño específicos de la demostración, pero lo que importa es la -webkit-mask-image que funciona como una imagen de fondo para encontrar el png requerido.

Podemos romper la imagen de la máscara haciéndola inválida, lo que simula lo que sucede si un navegador no comprende la propiedad.

Una vez que el punto final, todo lo que coloque en las ranuras tendrá que tener su propio fondo establecido en transparente para que las cosas que pasan por las ranuras sean visibles, pero esto es fácil .

Answer 4

Una solución completamente diferente sería usar un <svg> , o incluso un .png (aunque eso sería una solicitud HTTP adicional).

<div class=''container is--transparent''>
<svg>
# I am the same size as the background and have transparent parts where required
# Indeed, I could be a div, with a .png background, if you needed to support older browsers
</svg>
<input class=''input-one'' />
<input class=''input-two'' />
</div>

Luego usa css para establecer:

1. position: absolute; en todo dentro del div de fondo
2. el svg a ser top: 0; left: 0; entonces cubre el contenedor exactamente
3. las entradas que se colocarán sobre las partes transparentes en el SVG
4. los fondos de las entradas para ser transparente

De esta forma, todo lo que esté debajo de las entradas será transparente y, sin importar cuál sea el fondo, brillará.

El soporte para svgs también es excelente, tienes que volver a IE8 para que haya un problema.