Is It Possible To Have A Element Transparent And See Through His Parent Opaque Background

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 i

Solution 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;
}

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script><scriptsrc="http://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script><divclass="wrap"><divclass="top">This may be cheating, but it works...</div><inputtype="text"placeholder="testing"/><divclass="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>

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

Solution 3:

Yes you can, you can use mask

Support is not perfect, but the fallback is just no transparency, so it degrades nicely. This will also improve with time.

This will allow whatever is behind the element to shine through, flat colour, texture, gradient, multiple elements, images or even video.

Plus, it keeps the style in the css (and images) where it belongs.

I've made a JSFiddle to demonstrate - it's pretty simple really:

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

The markup is there, the background contains the element to be masked. The mask itself is an image made of of black areas of any level of transparency (including fully transparent). Here it is:

The two letter box shapes are the transparent bits which are where the background burns through to the foreground. The bar at the bottom is 50% transparent and serves to demonstrate how alpha values can be used.

The css is here:

.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://stackoverflowimages.excitedstatelaboratory.com/mask-example-image-2.png);
}

You can see some demo specific positioning and size stuff, but what matters is the -webkit-mask-image which works like a background image to find the required png.

We can break the mask image by making it property invalid, which simulates what happens if a browser doesn't understand the property.

Once final point, anything you put in the slots would then have to have it's own background set to transparent in order for the stuff coming through the slots to be visible, but this is easy.

Solution 4:

Take a look at this solution, 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});