Textpattern CMS

#1 2009-02-15 14:45:14

jstubbs

Moderator

From: Hong Kong

Registered: 2004-12-13

Posts: 2,395

Website

CSS opacity question

General CSS question on opacity. Not really used it much before, hence the question.

I have a content div and a footer div underneath it set to 366px. In the background of the footer is an image, 366px in height.

What I’d like to do is make the content div opaque so that the top of the image shows through in the content div. This is what I have so far:

#content {margin: 0 20px 0 20px; padding: 1em; background: #E7E7E8; -moz-border-radius: 20px; -webkit-border-radius: 20px; opacity: 0.75;}

/* hack for min-height */
#content {min-height: 400px; height: auto !important; height: 400px;}

#footer {clear: both; margin: -75px 0 0 0; padding: 0; background: transparent url(/images/116.png) no-repeat 0 bottom;}

/* hack for min-height */
#footer {min-height: 366px; height: auto !important; height: 366px;}

It all works fine, except for the fact that because the content div is opaque, any content placed in it is also opaque. Since we’ll have images/videos/text in the content div, this won’t work too well.

I can think of a couple of ways around this, but thought I’d ask in case someone knows a good way around this.

Last edited by jstubbs (2009-02-15 14:45:49)

---

Textpattern Tips

#2 2009-02-15 15:07:38

woof

Member

Registered: 2004-08-01

Posts: 128

Re: CSS opacity question

hi jstubbs, this might help: https://developer.mozilla.org/en/Useful_CSS_tips/Color_and_Background

(from https://developer.mozilla.org/en/Useful_CSS_tips/Color_and_Background) It means that, if you have a DIV with text inside, it is impossible to have opaque text on translucent background, because if you set the opacity property for the container DIV, all its content inherits the transparency and it is impossible to override it… by normal means.

There are a few suggested workarounds – I’ve used the PNG image with ALPHA channel method outlined at the bottom of the page