HTML/CSS : 내용/오버레이가없는 반투명 헤더

Question

현재 웹 프로젝트에서 로고 및 헤드 라인 뒤에 스크롤이 시작되어야합니다.
여기 페이지가 있습니다 : http://neos-srv.dyndns.org/restaurantAppHtdocs/site.php

그래서 헤더를 만들고 로고와 헤드 라인을 헤더에 넣었습니다. 그러나 영역을 스크롤 할 때마다 영역이 반투명하므로 헤더를 통해 빛난다.

콘텐츠와 겹치지 않는 반투명 헤더를 만들려면 어떻게해야합니까?

주 :

• 페이지 스크롤 만 브라우저 창/해상도 (테스트 브라우저 창을 최대화 취소)
• 헤더하기 위해 반 투명 할 필요가 너무 작은 경우 배경 그림을 보여줍니다. 배경의 한 부분 인 헤더에 이미 배경 이미지를 사용해 보았습니다.하지만이 모니터는 동일한 모니터에서만 사용하면 좋습니다. 예 : http://neos-srv.dyndns.org/restaurantAppHtdocs/site.php?page=restaurants
• 인터넷 익스플로러를 사용하지하시기 바랍니다에 - 제대로

Answer 1

테이크 위치가 디스플레이로는 #header와 스타일 오프 고정 된 사이트 렌더링하지 않기 때문에 : 블록 또는 유사한. 위치 : 고정은 이미지가이 머리글 섹션 아래에 나타나는 페이지와 함께 내용을 스크롤합니다.

Answer 2

FF와 Chrome에 대한 해결책을 찾았습니다. IE와 사파리하지만 페이지가 정말 나쁜 표시 :

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)" 
}