How to make div background color transparent in CSS

Question

I m not using CSS3  So I can t use opacity or filter attributes  Without using these attributes how can I make the background-color transparent of a div  It should be kind of the text box example in this link  Here the text box background color is transparent  I want to make the same  but without using the above mentioned attributes

User · Answer

From https   developer mozilla org en-US docs Web CSS background-color  To set background color      Hexadecimal value with color and 100  transparency   background-color   11ffee00      Fully transparent        Special keyword values    background-color  transparent      HSL value with color and 100  transparency   background-color  hsla 50  33   25   1 00       100  transparent        RGB value with color and 100  transparency   background-color  rgba 117  190  218  1 0       100  transparent

User · Answer

Opacity gives you translucency or transparency  See an example Fiddle here   -ms-filter   progid DXImageTransform Microsoft Alpha Opacity 50             IE 8    filter  alpha opacity 50       IE 5-7    -moz-opacity  0 5              Netscape    -khtml-opacity  0 5            Safari 1 x    opacity  0 5                   Good browsers      Note  these are NOT CSS3 properties  See http   css-tricks com snippets css cross-browser-opacity

User · Answer

Fully Opaque        class-name         opacity 1 0               Translucent        class-name         opacity 0 5               Transparent        class-name         opacity 0               or you can use a transparent rgba value like this        class-name        background-color  rgba 255  242  0  0 7                  Note - Opacity value can be anything between 0 to 1      Eg 0 1 0 8 etc

User · Answer

It might be a little late to the discussion but inevitably someone will stumble onto this post like I did  I found the answer I was looking for and thought I d post my own take on it  The following JSfiddle includes how to layer  PNG s with transparency  Jerska s mention of the transparency attribute for the div s CSS was the solution  http   jsfiddle net jyef3fqr    HTML       lt button id  toggle-box  gt toggle lt  button gt      lt div id  box  style  display none    gt  lt img src  x  gt  lt  div gt      lt button id  toggle-box2  gt toggle lt  button gt      lt div id  box2  style  display none   gt  lt img src  xx  gt  lt  div gt      lt button id  toggle-box3  gt toggle lt  button gt      lt div id  box3  style  display none    gt  lt img src  xxx  gt  lt  div gt    CSS    box   background-color   ffffff  height 400px  width  1200px  position  absolute  top 30px  z-index 1     box2   background-color   ffffff  height 400px  width  1200px  position  absolute  top 30px  z-index 2  background-color   transparent                 box3   background-color   ffffff  height 400px  width  1200px  position  absolute  top 30px  z-index 2  background-color   transparent           body  background-color  c0c0c0      JS       toggle-box   click   toggle function         box   animate   width   show         function         box   animate   width   hide               toggle-box2   click   toggle function         box2   animate   width   show         function         box2   animate   width   hide              toggle-box3   click   toggle function         box3   animate   width   show          function         box3   animate   width   hide            And my original inspiration http   jsfiddle net 5g1zwLe3  I also used paint net for creating the transparent PNG s  or rather the PNG s with transparent BG s

User · Answer

The problem with opacity is that it will also affect the content  when often you do not want this to happen   If you just want your element to be transparent  it s really as easy as    background-color  transparent    But if you want it to be in colors  you can use   background-color  rgba 255  0  0  0 4     Or define a background image  1px by 1px  saved with the right alpha   To do so  use Gimp  Paint Net or any other image software that allows you to do that  Just create a new image  delete the background and put a semi-transparent color in it  then save it in png    As said by Ren    the best thing to do would be to mix both  with the rgba first and the 1px by 1px image as a fallback if the browser doesn t support alpha    background  url  img red transparent background png    background  rgba 255  0  0  0 4     See also   http   www w3schools com cssref css colors legal asp   Demo   My JSFiddle

User · Answer

transparent is the default for background-color  http   www w3schools com cssref pr background-color asp

[css] How to make div background color transparent in CSS

Examples related to css

Examples related to html

Examples related to background-color

Examples related to transparent