CSS3背景不透明與背景圖片

我試圖對我的div有一個背景圖像應用，並仍然保持文本「不透明」的不透明效果。我的標記：CSS3背景不透明與背景圖片

<div id="projects" class="feature"> 
    Projects 
</div>

我的CSS：

.feature { 
    display: inline-block; 
    margin: 30px; 
    cursor: pointer; 
    width: 300px; 
    height: 300px; 
    -webkit-border-radius: 150px; 
    -moz-border-radius: 150px; 
    border-radius: 150px; 
    font-family: 'Droid Sans', Helvetica Neue, sans-serif; 
    font-size: 2em; 
    color: #fff; 
    text-align: center; 
    line-height: 1.2em; 
} 

.feature:after { 
    /* Fallback for web browsers that don't support RGBa */ 
    background-color: rgb(0, 0, 0); 
    /* RGBa with 0.6 opacity */ 
    background-color: rgba(0, 0, 0, 0.8); 
    /* For IE 8*/ 
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)"; 
} 

.feature#projects { 
    background-image: url('img/hero.png'); 
}

我想用僞元素，但都無濟於事！

任何想法？

來源

2011-09-05 benhowdle89