透明的圖像，但不透明的文本

我有以下的HTML代碼，它只是簡單地顯示一個帶有透明黑色覆蓋文字的圖像。透明的圖像，但不透明的文本

我不希望我的文字透明。我試着用z-index，但是我的文字仍然是透明的：

Demo

這有什麼錯我的代碼？

這是我的HTML：

<div class="leftContainer"> 
    <div class = "promo"> 
     <img src="images/soon.png" width="415" height="200" alt="soon event" /> 

     <div class="hilight"> 
      <h2>Hockey</h2> 
      <p>Sample text</p> 
     </div> 

    </div> 

    ... 

</div>

，這是我的CSS：

.hilight h2{ 
    font-family: Helvetica, Verdana; 
    color: #FFF; 
    z-index: 200; 
} 

.promo { 
    position: relative; 
} 
.promo img { 
    z-index: 1; 
} 

.hilight { 
    background-color: #000; 
    position: absolute; 
    height: 85px; 
    width: 415px; 
    opacity: 0.65; 
    font-family: Verdana, Geneva, sans-serif; 
    color: #FFF; 
    bottom: 0px; 
    z-index: 1; 
}

來源

2013-05-21 Pier-Alexandre Bouchard

變化.hilight的背景RGBA（0,0,0,0.65），取下透明度。

.hilight { 
background-color: rgba(0,0,0,0.65); 
position: absolute; 
height: 85px; 
width: 415px; 
font-family: Verdana, Geneva, sans-serif; 
color: #FFF; 
bottom: 0px; 
z-index: 1; 
}

來源

2013-05-21 20:42:04

只是爲了增加一些透明度，爲什麼是這樣的答案，不透明度是一種遺傳CSS屬性，這意味着具有屬性的父級的所有子節點也將被設置爲不透明。 – Alex

rgba不支持IE8 – claustrofob

我沒有使用rgba，因爲IE8 ..但它的工作原理。謝謝！ –

裏面的一切都會有0.65的不透明度。將文字移到疊加div外部。

來源

2013-05-21 20:42:30 claustrofob

您需要將不透明度設置爲僅用於背景，而不是整個div及其內容。你可以用rgba顏色選擇如

div { 
    background: rgba(0,0,0,0.50); 
}

做到這一點做的是使用一個半透明png像一些background-position的其他方式。這將是多瀏覽器兼容

來源

2013-05-21 20:44:14 Vector

對於跨瀏覽器支持使用透明1x1像素PNG圖像要做到這一點。
您可以生成本網站上的圖像：http://www.1x1px.me/
然後，只需刪除background-color和opacity和簡單的使用background:url(bg.png);

jsFiddle Live Demo

來源

2013-05-21 21:02:38

透明的圖像，但不透明的文本

回答

相關問題