如何將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 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; 
}