Search code examples
csshtmltransparency

Part of div transparent?

Is it possible to make only part of div transparent like an amount of space in div.

For example, you select 100px from top of div and the top 100px have an opacity set?

How would I do it?

Solution

  • You can do a couple of things:

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

    2. Use a CSS gradient in such a way that half is transparent and the other is not. Ex:

      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+ */

    3. Use multiple divs where one has transparent BG and the other does not. Ex:

      <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 those are the first three that come to mind.

    Good luck.