Opacity

[glenelkins]

If i set opicity to say 0.7 on a container, then add elements on top of this, the new elements seem to inherit the opacity as well. I have set the elements on top of the container to opacity: 1 and filter: alpha(opacity:100)  but they still seem to inherit the 0.7 alpha from their container

 

 

[gevans]

The inheriting container will also have a maximum opacity of its container. You can use an absolutely positioned div to sort this.

 

<div><!--main div should be set to position: relative-->
<div><!--opacity set to 0.7. specify a width and height-->
</div>
<div>
	<!--set to position: absolute.
	if you set background to transparent
	you'll have solid text-->
</div>
</div>

[glenelkins]

hmm. thanks for the response. i dont really want to set a child element to absolute positioning it can cause issues! is there no other method?

[gevans]

If you do it properly it will cause no issues, absolute positioning is a standard attribute for css.

 

There's no other way I know of doing this.

[glenelkins]

ok ill have a look at it

[haku]

gevans is right. There isn't any other way to do this. Unfortunately, depending on your design, absolute positioning isn't going to work.

[TheFilmGod]

png partial transparency is always a possibility.