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

Question

我有一个Backgroundcolor黑色和opacity0.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小提琴

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)";

演示

在此处查看详细说明

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