samedi 5 mai 2012

CSS background transparency without affecting child elements

A few day's ago I was just looking for background transparency without effecting the child elements but it was very difficult for me I was using the below code but it was effecting all child element.

.transparency-class {
  background-color: #fff;
  border: solid 1px #fff;
  filter: alpha(opacity=50);
  -moz-opacity: 0.5;
  opacity: 0.5;
  }

Finally I found the below code really easy working in almost all browser.
Are you really want to use CSS background transparency code just go ahead with this don't use the above one:

.transparent-bg {
background: #fff; /* solid color */
background: rgba(255,255,255,0.5); /* transparent color */
background: transparent9; /* clear solid background for ie */
zoom:1; /* required for the filters */
-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#50FFFFFF, endColorstr=#50FFFFFF)"; /* IE8 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#50FFFFFF, endColorstr=#50FFFFFF); /* IE5.5-7 */
}







Aucun commentaire:

Enregistrer un commentaire