CSS中的页脚透明度

3 css footer css3

我试图让我的页脚透明,我已成功地成功完成了虽然为什么页脚中的内容也会变为相同的透明度?

CSS -

**.footer {
background: #000000;
opacity:0.6;
filter:Alpha(opacity=60); /* IE8 and earlier */
margin-top: 2em;
float: left;
width: 800px;
height: 175px;
clear:both
margin-left: auto;
margin-right: auto;
line-height: 1.0em;}**
Run Code Online (Sandbox Code Playgroud)

然后我的内容在顶部的单独的类中.如何使内容位于顶部,只有页脚背景/页脚包装器被着色?

Fre*_*red 5

你最好的选择是使用透明的背景,例如

.footer {
  opacity: 1; // Leave this as 1
  background-color: rgba(0,0,0,0.6); // This is in the form rgba(R,G,B,a) where a is your opacity
  // The rest of your CSS
}
Run Code Online (Sandbox Code Playgroud)

此外,为了维护IE支持,您必须在<head>标记中添加类似的内容

<!--[if IE]>

 <style type="text/css">
   .footer { 
     background:transparent;
     filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#3C000000,endColorstr=#3C000000); 
     zoom: 1;
   } 
 </style>

<![endif]-->
Run Code Online (Sandbox Code Playgroud)

其中#3C000000是aRGB形式,不透明度为十六进制(即3C60%).有关详细信息,请参阅csstricks.

弗雷德.

  • 也许一个正确的答案滴答会很好? (2认同)