html - 如果 div 是透明的，则使边框不透明

Question

是否有一些 CSS 方法可以使 div 透明，但边框不透明？

HTML：

<div class="ts-twentytwelve-description">into quality solutions</div>

CSS：

border-left: 9px solid #fff;
border-right: 9px solid #fff;
background-color: black;
opacity: 0.86;
filter: alpha(opacity=86);

Answer 1

你可以这样做：

.ts-twentytwelve-description {
border-left: 9px solid #fff;
border-right: 9px solid #fff;
background-color: rgba(0,0,0,.86);
}

使用 background-color:rgba(value) 您只能为背景颜色添加不透明度。对于 IE，你在这里有生成器

Answer 2

这是一个有效的jsfiddle：http: //jsfiddle.net/q4XVZ/2/

CSS：

.ts-twentytwelve-description {
border-top: 1px solid #000;
border-left: 9px solid #000;
border-right: 9px solid #000;
border-bottom: 1px solid #000;
background-color: transparent;
opacity: 0.86;
filter: alpha(opacity=86);
}

HTML：

<div class="ts-twentytwelve-description">into quality solutions</div>

Answer 3

尝试这个：

div {
    background-color: rgba(0, 0, 0, .5); // or transparent
    border-color: #fff;
}

编辑：

您可以使用此解决方案：

<div class="border_div">
   <div class="content_div">
       your content here
   </div>
</div>

.border_div {
    border: 5px solid #fff;
}

.content_div {
    opacity: .86;
}