Is it possible to have a transparent element and see through its parent opaque background
Hi I am developing a form (HTML / CSS / JS) that pops up by content when a user wants to subscribe or login. The entire background of the form is a solid opaque color, but I want the input to have a transparent background so that we can see the content behind its form. I have no problem setting transparent inputs, but I don't know how I can get them to "pass" their parent background color. I'm starting to think that this is not possible with just CSS. I can share the code, but this sounds more like a general question. Thanks to
source to share
A completely different solution would be to use <svg>
or even .png
(although it would be an additional 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 install:
-
position: absolute;
on everything in the background div - svg will be
top: 0;
left: 0;
, so it closes the container completely - inputs to be positioned above transparent parts in SVG
- input backgrounds must be transparent
Thus, everything under the entrances will be transparent, and whatever it is will shine.
The svgs support is excellent as well, you have to go back to IE8 for the problem to occur.
source to share
You can cheat by making your input a visible cutout, using a few more elements and a little creativity ...
$('.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>
source to share
Yes you can use mask
The support isn't perfect , but backups are just a lack of transparency, so it degrades nicely. It will also improve over time.
This will allow anything behind the element to shine, a flat color, texture, gradient, multiple elements, images or even video.
Also, it keeps styling in css (and images) where it belongs.
I made a JSFiddle to demonstrate - it's pretty simple:
<div class="background">
<div class='masked'>
</div>
</div>
The markup is there, the background contains a masking element. The mask itself is an image of black areas of any transparency level (including fully transparent). Here he is:
The two-letter shapes are transparent bits where the background is brought to the fore. The bar below is 50% transparent and serves to demonstrate how alpha values can be used.
css is located 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 specific positions for positioning and sizing, but what matters is what -webkit-mask-image
works as a background image to find the required png.
We can rip up the mask image by invalidating it, which simulates what happens if the browser doesn't understand the property.
After the final point, whatever you put in the slots would have to have its own background set to transparent so the material passing through the slots is visible, but that's easy .
source to share
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});
source to share