12

I have this registration form box, and i really like how the background gets opacity, transparent with 25% (85), but then i notice that the text and the form elements also gets darkened alittle and such, so i wonder how to do this only with the border and background and not with the stuff inside the box?

#regForm {
z-index:11;
position: absolute;
top: 120px;
left: 500px;
background: #000;
color: #FFF;
width: 500px;
height: 240px;
border: 6px solid #18110c;
text-align: center;
margin: 40px;
padding: 1px;
  opacity: 0.85;
  -moz-opacity: 0.85; /* older Gecko-based browsers */
  filter:alpha(opacity=85); /* For IE6&7 */

}
Improve this question
0

5 Answers 5

Reset to default
14

The easy way would be to move the text into a separate div, like so. Basically you apply the opacity to a separate div and position the text on top...

<div id="parent">
   <div id="opacity"></div>
   <div id="child">text</div>
</div>

div#parent { position:relative; width:200px; height:200px; }
div#child { position:absolute; width:200px; height:200px; z-index:2; }
div#opacity { position:absolute; width:200px; height:200px; z-index:1; }

The other route would be rgba. Don't forget there's a separate css property to feed IE since it doesn't support the rgba property. You can also feed a transparent png. 

#regForm {
   background: rgb(200, 54, 54); /* fallback color */
   background: rgba(200, 54, 54, 0.5);
}

And for IE...

<!--[if IE]>

   <style type="text/css">

   .color-block {
       background:transparent;
       filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000050,endColorstr=#99000050);
       zoom: 1;
    } 

    </style>

<![endif]-->

Personally I'd go with the first option because it's less of a hassle.

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

Rgba is a great idea, but not supported by IE6 and 7.
It is, through a filter.
The first solution is great, thank you
As of 2015, the rgba solution is far, far better because you don't have to have fixed dimensions for the divs, and you don't need to mess with z-indexes. IE6 and 7 are virtually extinct.
6

RGBA is the way to go if you're only looking for a css solution. It is possible to use a solid colour as fallback for the old browsers which can't use RGBA.

.stuff {
  background-color: rgb(55, 55, 55);
  background-color: rgba(55, 55, 55, 0.5);
}

You can also fallback on an image:

.stuff2 {
  background: transparent url(background.png);
  background: rgba(0, 0, 0, 0.5) none;
}

Here is all you need for getting this to work in all evil versions of IE: http://kimili.com/journal/rgba-hsla-css-generator-for-internet-explorer

Improve this answer

Comments

4

Your best bet will probably be to use semi-transparent PNGs for your background, or to set the colors for the background and border using RGBa. PNGs will work well if you don't mind the extra markup you'll need to make a flexible-width container, but they also aren't supported in IE6 (if that's a concern).

RGBa is less widely-implemented across browsers, but if the transparency is only used for visual flair, then it's a good place to use some progressive enhancement.

For RGBa, you'll need to add an extra line as a fallback:

#regForm {
    background: rgb(0, 0, 0);
    background: rgba(0, 0, 0, 0.5);
    border-color: rgb(24, 17, 12);
    border-color: rgba(24, 17, 12);
}

Any browser that doesn't recognize the RGBa declaration will simply use the plain RGB.

CSS-Tricks article on RGBa across browsers

Improve this answer

1 Comment

As of 2015, you should use rgba. IE6 is fortunately extinct, and far worse things will break in some stray IE6 than the background color.
1

No need to do all those stuff like no need to apply positions on a div then opacity, here is very simple way to achieve it, background: rgba(0, 0, 0, 0.6);

only you have to use background color with opacity value.

Improve this answer

1 Comment

This is basically the same answer as Derek's, only without mentioning PNGs.
-2

Cant't be done: Any child elements will inherit the parent's opacity.

I your case it's easy though - just use two divs. Have the background image in one and apply the opacity, and put the content into the second one. Use position: absolute and z-index to place them on top of each other.

Improve this answer

1 Comment

No. Use rgba as the other answers suggest.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.