2011-03-02 5 views
11

웹 응용 프로그램이 있고 배경 이미지가 어두운 색상입니다. 또한 크기가 100KB가 넘습니다. (나는 그 배경 이미지가 그다지 크지 않다는 것을 정말로 고맙게 여긴다. 그러나 그것은 내가 무엇에 대해서나이 질문의 주제를 할 수있는 것이 아니다 .. 게다가 그것은 JPEG이다! .. 웹 디자인은 고객으로부터 왔고 나는 내 시위에도 불구하고 그대로 두어야합니다!)배경 이미지가로드되기 전에 웹 페이지 배경색을 설정하십시오.

배경 이미지는 주로 어두운 색 (거의 검정색)으로 구성되어 있기 때문에 텍스트는 흰색입니다.

처음으로 사용자가 웹 페이지로 이동할 때 배경이 흰색 (기본 브라우저 배경)이고 텍스트도 흰색이므로 텍스트를 읽을 수 없습니다. 배경 이미지가로드 된 후에 만 ​​텍스트를 읽을 수 있습니까? 페이지에 CSS 파일이로드되고 다른 CSS 파일이로드되며 백그라운드 이미지가 지정되므로 UMTS 모바일 인터넷 연결과 같이 대기 시간이 긴 연결에서이 작업은 몇 초 정도 걸릴 수 있습니다.)

Is "이 페이지의 배경은 특정 배경 이미지를 가져야 만합니다.하지만 배경색이로드 될 때까지 검정색이 표시되어야합니다. 그렇지 않으면" ? 그렇게하면 사용자는 텍스트를 즉시 읽을 수 있습니다. 이 일을 보았을 것입니다 (또는 테이블 셀 배경 이었습니까?)하지만 슬프게도 어떻게 인터넷을 기억할 수없고 인터넷 검색도 도움이되지 못했습니다.

현재 CSS는 다음과 같습니다

body { 
    background: transparent url(bg.jpg) top left no-repeat; 
} 

본인은 "배경"속성에 "블랙"추가하지만 도움이되지 않았다.

+0

"검정색"을 추가하고 "투명"을 동시에 제거 했습니까? –

+0

아! 나는 내가 그것을 놓쳤다라고 생각할 수 없다. .. 대답했던 모두에게 감사드립니다! –

답변

11

실제로 꽤 쉽게, 당신이 이미 가지고있는 코드를 변경 :

body { 
    background: #000 url(bg.jpg) top left no-repeat; 
} 

이제 검은 색으로 설정 body 요소의 배경색이, 거기 transparent.

두 개의 CSS 파일을 통해 느리게로드되는 것처럼 흰색이 깜박일 수 있습니다. 이것은 문서의 <head> 섹션에서 <style> 태그를 사용하여 피할 수 있습니다

<style type="text/css"> 

body { 
    background: #000 url(bg.jpg) top left no-repeat; 
} 

</style> 

이 이전의 답변을 작동합니다 :)

12

이것은

body { 
    background: url(bg.jpg) top left no-repeat #000; 
} 

이 몸에 검은 색을 적용해야한다.

2

바로 검은 배경을해야하지만 넣다 그들은하지 않습니다 여기 또 다른 트릭이있다. javascript를 사용하여 이미지를 미리로드 한 다음 본문 스타일을 업데이트하여 배경으로로드 한 이미지를 사용할 수 있습니다.

여기서 jquery를 사용하는 예는 http://jqueryfordesigners.com/image-loading/입니다. 사실, 니가 필요한 것 같아.

관련 문제