2 replies [Last post]
jasondashterhune's picture
Last seen: 12 years 22 weeks ago
Timezone: GMT-6
Joined: 2009-12-23
Posts: 1
Points: 2

I am new to this forum. I have had an introduction to web dev. course in school. I was then intrested in making my own page. I have just started to develop my page, www.jason-terhune.com. I thought I could use a

light gray with opacity of 0.5 for a second "background". The first being an image. I then was going to use this 2nd background as a "target" for the text of the document. The problem I have run into is the text seems to want to inherit the 0.5 opacity.. I have tried to use a z-index to make this work somehow, with no avail... I have had a hard time explaining myself I know, but if you take a look at my page you will see what I am talking about. Any suggestions on this matter?

gary.turner's picture
Last seen: 1 year 12 weeks ago
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

When you set opacity, it

When you set opacity, it applies to the element you targeted, and all its descendants. There are workarounds, but as you say you are still a novice, let me suggest you skip this plan for a while. Give yourself a chance to fully understand the more basic issues in css—believe me, there are plenty to keep you busy. Once you have a more complete understanding, you may divine the answer yourself, or at least grok the explanation you're given.



If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

FernE97's picture
Dublin, CA
Last seen: 3 years 12 weeks ago
Dublin, CA
Timezone: GMT-8
Joined: 2007-01-10
Posts: 176
Points: 44

Try using rgba on the div

Try using rgba on the div instead of opacity. It won't work in all browsers, but will work in most modern browsers.

#content {background:rgba(150,150,150,.5);}

This will only apply to the background color of that div and will not affect the transparency of the text.