2011-09-05 158 views
2

我試圖對我的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'); 
} 

我想用僞元素,但都無濟於事!

任何想法?

回答

3

我可能會使用半透明png作爲背景圖片,然後相應地設置文字的樣式。

您可能還需要尋找到的RGBA:

http://robertnyman.com/2010/01/11/css-background-transparency-without-affecting-child-elements-through-rgba-and-filters/

這適用於背景色,雖然它也可以在圖像上工作(未經測試,雖然)

+0

已經嘗試過它,圖像保持完全不透明 – benhowdle89

+0

@ benhowdle89 ... RGBa,對嗎?半透明的「png」如何?不理想,但應該工作。 –