сделать границу непрозрачной, если 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); 
} 

С фоном-цветом: rgba (значение) вы можете добавить непрозрачность только для фона. Для IE у вас есть generator here

Answer 2

Попробуйте это:

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

EDIT:

Вы можете использовать это решение:

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

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

.content_div { 
    opacity: .86; 
} 

Answer 3

Вот рабочая 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>