Making text background transparent but not text itself

Question

So I am having a problem  I have looked around and looked around but no luck  I would like to make the background of my body transparent but leave the text non transparent  As it is right now I keep making both the same opacity  Here is my code     charset  utf-8   body       font  100  1 4 Verdana  Arial  Helvetica  sans-serif      background-color   42413C      margin  0      padding  0      color   000           Element tag selectors       ul  ol  dl        padding  0      margin  0    h1  h2  h3  h4  h5  h6  p       margin-top  0      padding-right  15px      padding-left  15px      opacity 1    a img        border  none    a link       color   42413C      text-decoration  underline    a visited       color   6E6C64      text-decoration  underline    a hover  a active  a focus       text-decoration  none     container       width  750px      margin  0 auto     content       padding 20px      width 710px      position relative      background  CCC      opacity  0 5     fltrt       float  right      margin-left  8px     fltlft        float  left      margin-right  8px     clearfloat        clear both      height 0      font-size  1px      line-height  0px     header       top 0       width  750px      height  200px      background-image  url images header png       background-repeat no-repeat      background-position center     navbar       height  50px      width  750px      position  relative      z-index  2     bg       position  fixed      top  25       left  15       z-index  -1    div   display  block      Here is my website  click the link dont type  tccraft net  in your url it will take you to a facebook page   http   tccraft net index php Thank you

User · Accepted Answer

Don t use opacity for this  set the background to an RGBA-value instead to only make the background semi-transparent  In your case it would be like this    content       padding 20px      width 710px      position relative      background  rgb 204  204  204      Fallback for older browsers without RGBA-support        background  rgba 204  204  204  0 5       See http   css-tricks com rgba-browser-support  for more info and samples of rgba-values in css

User · Answer

box-shadow  inset 1px 2000px rgba 208  208  208  0 54

User · Answer

If you use RGBA for modern browsers you don t need let older IEs use only the non-transparent version of the given color with RGB   If you don t stick to CSS-only solutions  give CSS3PIE a try  With this syntax you can see exactly the same result in older IEs that you see in modern browsers   div       -pie-background  rgba 223 231 233 0 8       behavior  url    PIE htc

User · Answer

opacity will make both text and background transparent  Use a semi-transparent background-color instead  by using a rgba   value for example  Works on IE8

User · Answer

For a fully transparent background use    background  transparent    Otherwise for a semi-transparent color fill use    background  rgba 255 255 255 0 5      or hsla 0  0   100   0 5    where the values are   background  rgba red green blue opacity      or hsla hue  saturation  lightness  opacity    You can also use rgba values for gradient backgrounds   To get transparency on an image background simply reduce the opacity of the image in an image editor of you choice beforehand

[html] Making text background transparent but not text itself

Examples related to html

Examples related to css

Examples related to text

Examples related to opacity