2012-06-21 1 views
0

페이지 제출 후 로딩 이미지를 표시하고 싶습니다. 페이지의 중간에 이미지 표시를로드하는 것과 같고 페이지 내용을 표시하는 투명한 배경이 있어야합니다. 나는 다음을 사용했습니다페이지를 제출할 때 투명한 배경으로 이미지를로드하는 데만 표시합니다.

#loading { 
    position:fixed; 
    top:50%; 
    left:50%; 
    z-index:1104; 
    background-color:#999999; 
    width:100%; 
    height:100%; 

    } 

답변에 javascript 부분을 포함하지 마십시오. 스타일 지정에 대해서만 알고 싶습니다.

전체 페이지에 배경색을 부여하지 않습니다. 페이지 중앙에 로딩 이미지를 표시하고 페이지 내용이 약간 표시되도록하려면 어떻게 도와주십시오.

감사

답변

2

, 당신은 단순히 요소를 오버레이하고 배경 중앙 수 : 데모 목적을 위해 반투명 BGCOLOR와

#overlay { 
    /*Cover the entire screen regardless of scrolling*/ 
    position:fixed;top:0;right:0;bottom:0;left:0; 
    background: #ff0000 url(...) no-repeat 50% 50%; 
} 

Fiddled을 .

편집 : 실제로 요소를 세로 및 가로 모두 가운데에 맞 춥니 다 is hard.

+0

감사합니다. 투명성을 어디에 정의했는지 알고 싶었습니다. 이 rgba입니까 (0,0,0,0.5)? – phpgeek

+0

@vikassharma : 그래, 그 대체 색 표기법, 효과적으로 # 000000 0.5 알파 –

+0

와 함께 좋아, 알았어 .. :) – phpgeek

2

상단 제거 : 50 % & 왼쪽 : 50 %; 콘텐츠의 모든 상호 작용이로드 해제 할 것을 가정

http://jsfiddle.net/qqncv/1/

+0

상단 왼쪽을 제거한 후로드 이미지가 페이지 왼쪽 상단에 표시됩니다. 페이지 중간에 가로 및 세로 가운데 중간에 표시되어야합니다. – phpgeek

+0

로딩 div에 배경 이미지 추가 업데이트 된 바이올린 확인 http://jsfiddle.net/qqncv/1/ – SVS

관련 문제