Is it possible to have a element transparent and see through his parent opaque background

Question

Hi I'm designing a form (HTML / CSS / JS) that pop's over the content when the user wants to subscribe or to login. The whole form background is solid opaque color but I want the inputs to have a transparent background so we can see the content behind the form through it. I don't have any problem setting the inputs transparent but I have no idea of how I can make them "pass through" their parent background color. I begin to think that is impossible with only CSS. I can share code but it's more like a generic question. Thanks

Answer 1

You can cheat by making your input appear to be a cutout, using a few more elements and a little creativity...

Working Example

$('.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 2

A completely different solution would be to use an <svg>, or even a .png (though that would be an extra http request).

<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>

Then use css to set:

1. position: absolute; on everything within the background div
2. the svg to be top: 0; left: 0; so it covers the container exactly
3. the inputs to be positioned over the transparent parts in the SVG
4. the backgrounds of the inputs to be transparent

This way everything under the inputs will be transparent and whatever the background is will shine though.

Support for svgs is also excellent, you have to go back to IE8 for there to be a problem.