:::: MENU ::::

How to make text container background semi-transparent using CSS and jQuery?

CSS has opacity property, that can applied to block level or inline elements. So you can use just css property,

text-div-background-transparent-th

To make it cross browser we can use css prefixer.

So in above code resulted element will become 50% transparent. But In practical scenario we don’t want to make entire div semi-transparent but only its background. So, let say we have html div with id=”make_me_semi_transparent” like this.

All elements inside <div> will become semi transparent as all child elements will inherit parent property.

So, to achieve this we need to use css positioning in which parent element will be relative to dom and all element inside parent element will be absolute to it. Then we need to arrange those inside element stack wise. i.e Background container will have less z-index css property and foreground element will be having higher z-index. Find visual concept below.

Let’s try to implement it in html/css

layers-concept

HTML

CSS:-

Test demo in this fiddle

What does above code do, let’s break up?

We set parent node relative to dom.

Then we placed semi-transparent div container layer in background.

So, above css code will push <div class=”semi_transparent_bg”></div> div in background with z-index = 1 property and applied opacity with css property opacity. To make it compatible with browser < IE 9 you could use IE filters as shown above.

After that we put main container div to front with z-index=2

Now let’s make it more usable and practical with use of jquery

text-div-background-transparent

In above HTML we removed background layer that we’ll insert it using jQuery and then adjust the height of container.

And CSS would be,

So final code I’ll be

Even more simplest way to archive it using css3 is use alpha property of background selector.

Demo


2 Comments

So, what do you think ?

  •