Login | Register | FAQ
Anonymous

CSS Opacity - Fade wrapper only, not text

+ Post a reply

2 posts Page 1 of 1


CSS Opacity - Fade wrapper only, not text

by cjr » Thu Jul 03, 2014 3:01 pm

I am adding a wrapper block with a low opacity to show through a background picture. I have these two div id's set up separate so that the wrapper block is transparent and shows through the bg pic and the content text is in a separate div so that when I fade the box the text doesn't fade as well. However, even though I have them in two different div's the text still fades. How can I get this so that only the block fades, but not the text?

An example of what I'm trying to achieve: http://krisgordon.net/bio.htm

#content_wrapper_two_parts
{position:relative;
z-index:1;
width:275px;
height:65;
text-align:left;
background-color:#000;
/* start opacity settings */
filter:alpha(opacity=.40);
-moz-opacity:.40;
opacity:.40;
/* end opacity settings */
}

#content_two_parts
{position:relative;
z-index:2;
top:-240px
width:100;
font-size:10px;
color:#fff;
text-align:left;
margin:15px;
}
User avatar

cjr

  • Posts: 14
  • Joined: Fri Jun 06, 2014 2:27 pm

Re: CSS Opacity - Fade wrapper only, not text

by XainPro » Sat Jul 05, 2014 12:13 am

i have seen your link the text is not faded only wrapper is fade but it look like that text is also fade you can try to change text font family size and color to notice this effect.
User avatar

XainPro

  • Posts: 3933
  • Joined: Fri Feb 17, 2012 8:10 pm


+ Post a reply

Page 1 of 1