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

Question

我有一个Div与Backgroundcolor黑色和opacity 0.6。 现在我想将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小提琴

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

请在此处查看详细说明

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