3

我正在尝试使我的页脚透明，我已经成功地做到了，但为什么我在页脚中的内容也会更改为相同的透明度？

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;}**

然后我的内容在顶部的单独类中。如何使该内容位于顶部并且仅对页脚背景/页脚包装进行着色？

4

1 回答 1

7

您最好的选择是使用透明背景，例如

.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
}

此外，为了保持对 IE 的支持，您必须在<head>标签中添加类似的内容

<!--[if IE]>

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

<![endif]-->

其中#3C000000是 aRGB 的形式，不透明度为十六进制（即3C60%）。有关详细信息，请参阅csstricks。

弗雷德。

于 2013-03-02T21:52:17.727 回答