CSS - 對圖像

Question

頭的透明度說在我的CSS我有以下幾點：

h1 { 
    font-family: Verdana; 
    font-size: 20pt; 
    color: Black; 
    z-index: 2; 
    opacity: 1.0; 
} 

#topFrame { 
    position: fixed; 
    top: 0; 
    left: 20%; 
    right: 20%; 
    height: 120px; 
    overflow: hidden; 
    border: 1px solid black; 
    background-image: url(dunno.jpg); 
    text-align: center; 
    vertical-align: center; 
    opacity: 0.5; 
    z-index: 1; 
} 

當我把在div id爲「topFrame」中的HTML，然後嘗試編寫使用h1標籤頭，標題與圖像一樣不透明（所以不是「突出顯示」黑色，而是顯示爲暗淡的灰色。

有沒有什麼辦法可以讓h1在不透明度方面脫穎而出仍然保持圖像半透明，沒有創建一個無形的div來容納標題（如果有意義的話）？

Answer 1

沒有真正的解決方案。

如果您有一個不透明度爲0.5的父元素，則該子元素將具有相同的不透明度。防止這種

一種方法是你的h1標籤放置在你的#topFrame的頂部，你將不得不確保H1不#topFrame

東西similair到的

h1{ font-family: Verdana; font-size: 20pt; color: Black; z-index: 2; opacity: 1.0; position: fixed; left: 20%; right: 20% } 

一個孩子。

Answer 2

CSS不透明度被遺傳給孩子。你可以使用一個透明的PNG作爲topFrame的背景，你可以模仿一個父子關係，如下所示：http://www.stevenyork.com/tutorial/pure_css_opacity_and_how_to_have_opaque_children文章，否則你會失去運氣，我想。