HTML/CSS：半透明頭 - 沒有內容/覆蓋

在我當前的網絡PROJEKT滾動應的標識和標題後啓動。
這裏是頁：http://neos-srv.dyndns.org/restaurantAppHtdocs/site.php HTML/CSS：半透明頭 - 沒有內容/覆蓋

所以我創建了一個頭，並放置標誌和標頭中的頭條新聞。但是，由於每當你滾動內容時，該區域都是半透明的。

那麼，怎樣才能使一個半透明頭不與內容重疊？

註釋：僅

的頁面滾動如果瀏覽器窗口/分辨率太小（撤消最大化瀏覽器窗口上進行測試）
頁眉需要是半透明的，以顯示背景圖片。我已經嘗試使用背景圖像作爲背景的一部分 - 但這種顯示器只適用於相同的顯示器。例如：http://neos-srv.dyndns.org/restaurantAppHtdocs/site.php?page=restaurants
請不要使用IE瀏覽器 - 因爲它不會使網站頁面正常

來源

2012-08-06 Thorsten Niehues

我喜歡薯條的積木。 – Bazzz 2012-08-06 07:44:56

採取位置固定關斷的#header和樣式顯示：塊或相似。位置：固定會使內容與頁面滾動，這就是爲什麼圖像出現在這個標題部分下面。

來源

2012-08-06 07:42:54 Rhyso

Ahm。我雖然這個固定使得div停留在相同的位置。如果我刪除固定頭也滾動。你可以發佈一個教程或一堆代碼？謝謝 – 2012-08-06 13:58:49

我發現FF和Chrome修復。 IE和Safari顯示這些網頁非常糟糕：

HTML：

<div id="header">' 
<div id="headerPic" style="background: url(Bg.jpg) no-repeat center center fixed; 
-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover; 
background-size: cover; 
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='Bg.jpg', sizingMethod=scale); 
-ms-filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='Bg.jpg', sizingMethod=scale);"> 
<div id="headerContent"> 
... 
</div></div></div>

CSS：

#header { 
    position:fixed; 
    display: block; 
    top:0px; left:0px; right:0px; 
width: 100%px; 
    z-index:5; 
    overflow: hidden; 
    height: 215px; 
} 

#headerPic { 
    width: 100%; height: 100%;   
    background: url(images/restaurantsBg.jpg) no-repeat center center fixed; 
    background-size: 100%; 
} 

#headerContent { 
    width: 701px; 
    margin: 0 auto; 
    height: 215px; 
    background: rgba(255,255,255, 0.80); 
    /* Colors: transparency, r, g, b 
    /* For IE 5.5 - 7 */ 
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#d0ffffff, endColorstr=#d0ffffff); 
    /* For IE 8 */ 
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#d0ffffff, endColorstr=#d0ffffff)" 
}

來源

2012-08-21 08:47:59

HTML/CSS：半透明頭 - 沒有內容/覆蓋

回答

相關問題