Geek Answers Handbook

Developing a thematic layout using the rgba css property not working in IE

I ran into a problem while creating a CSS oriented template for a website. The requirement is that the user select a primary and secondary color for their customized theme. These are blocks on the page that should be displayed with some opacity (or alpha value) over which the gradient image will be displayed. The problem with using the opacity css property is that all children also inherit an opacity value that is not what we want. Using the rgba property, on the other hand, has IE compatibility issues. Which approach should be taken?

/* HTML */
  <div class="someClass">
       Page Title
 </div>

/* CSS */ 
.someClass{

  border-top:10px solid #b59a47;
  border-bottom:5px solid #f4e196;
  background-image: url(../../images/contentHeader-bg.png);
  background-color: rgba(244,225,150,0.2);
}
+5
3

RGBa, , , "" . , , ( ). , , , . .

div {
   background: rgb(200, 54, 54); /* The Fallback */
   background: rgba(200, 54, 54, 0.5);
}

, , , IE 6 7.

+1

( , )?

.contentHeader {
   opacity:0.2;
   filter: alpha(opacity=20); /*for IE6-8*/
}
.contentHeader * {
   opacity:1;
   filter: alpha(opacity=100); /*for IE6-8*/
}

, !important .

+1

, rgba :

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000050,endColorstr=#99000050);
0

More articles:


All Articles