Is the div part transparent?

Question

Is it possible to make only part of a div transparent, like the amount of space in a div.

For example, do you select 100px on top of the div and the top 100px has a set of opacity?

How can I do it?

Answer 1

You can do a few things:

• Try a background image where half is transparent and the other is not.

• Use a CSS gradient so that half is transparent and the other is not. Example:

  background: -moz-linear-gradient(top, rgba(30,87,153,0) 0%, rgba(41,137,216,0) 50%, rgba(34,125,203,1) 52%, rgba(125,185,232,1) 100%); /* FF3.6+ */ 

• Use multiple divs that have transparent BG and the other doesn't. Example:

   <div> <div id="transparent" style="background: transparent"></div> <div id="not-transparent" style="background: #000"></div> </div> 

I'm sure there are other ways, but these are the first three that come to mind.

Good luck.

Answer 2

Or you create the correct background-image using a translucent PNG (transparent on top, opaque at the bottom, for example); or you use two subdisks, each of which has its own background-color (one of which with rgba for the transparent part).

Answer 3

You can use css3 properties along with pseudo-elements to create this effect:

The trick is to draw a field with the :before or :after pseudo-element. We can apply the background property to the inner translucent background. Although for the external background we can use the large value of box-shadow .

HTML:

 <div class="box"></div> 

CSS

 .box { position: relative; overflow: hidden; height: 120px; width: 250px; } .box:before { background: rgba(0, 0, 0, 0.3); box-shadow: 0 0 0 1000px #000; position: absolute; height: 50px; width: 50px; content: ''; left: 0; top: 0; } 

 html, body { height: 100%; } body { background: linear-gradient(to top, #ff5a00 0, #ffae00 100%); margin: 0; } .box { position: relative; margin: 30px 20px; overflow: hidden; height: 120px; width: 250px; } .box:before { background: rgba(0, 0, 0, 0.3); box-shadow: 0 0 0 1000px #000; position: absolute; height: 50px; width: 50px; content: ''; left: 0; top: 0; } 

 <div class="box"></div>