如何将Bordertop黑色设置为具有黑色不透明背景颜色的div

Question

我有一个Backgroundcolor黑色和opacity 0.6的Div。 现在我想将bordertop设置为没有不透明度的黑色

CSS：

 #MainHeader
    {
        position:relative;
        top:0px;
        height:50px;
        width:1000px;
        opacity:0.7;
        background-color:black;
        border-top:10px solid black;
     }

HTML：

<div id="MainHeader"></div>

JS fiddle

Answer 1

使用RGB提供背景色和背景色不透明度

   background-color: rgba(0, 0, 0, 0.7);
    /* For IE 5.5 - 7*/
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
    /* For IE 8*/
   -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";

<强> DEMO

查看详细说明here

Answer 2

使用 rgba 背景颜色代替不透明度。

MainHeader {
position:relative;
top:0px;
height:50px;
width:1000px;
background-color:rgba(67, 67, 69, 0.6);  // use this instead of opacity
border-top:10px solid #000000;
}