두 이미지를 모두 다운로드 하시겠습니까? 브라우저가 똑똑하고 마지막 하나만 다운로드합니까? 첫 번째 다운로드를 시작한 다음 취소하거나 모든 CSS가로드 될 때까지 기다렸다가 마지막 이미지를 다운로드합니까?배경 이미지를 덮어 쓸 때 두 이미지가 모두 다운로드 되었습니까?
body { background:url(img/bg/bg1.png) }
body { background:url(img/bg/bg2.png) }
CSS는 해석 된 언어입니다. 완료 될 때까지 한 줄씩 실행되므로 예 - 둘 다 잡을 것입니다.
는 편집 : 해석 된 언어의 특성상
이는 어떻게 해야 작업 ... 같은 것들을 찾기 위해 브라우저에 구운 지능형 preproccessors이 있다는 것을 비록 보인다
이.
사실은 몰랐다, 그래서 I tested it out :
body { background:url(http://placekitten.com/200/300) }
body { background:url(http://placekitten.com/g/200/300) }
아마 브라우저에 따라 다르지만 것 같습니다 적어도 크롬 (논리적)이 규칙을 결정하는 스타일 시트 첫을 구문 분석에 대한 그러면 적용된 규칙의 이미지가 다운로드됩니다. 즉, 두 번째 이미지 만 다운로드됩니다 (네트워크 탭에서이를 확인합니다).
편집 : 파이어 폭스
에서 동일한 결과를 테스트 더 편집 : 심지어 배경을 설정 style 속성을 사용하여 동일한 결과. 그것은 그것이 보이는 가장 높은 특이성을 가진 것만을 다운로드 할 것입니다.
와우 나는 그것을 기대하지 않았다. 다른 브라우저에서도이 기능을 지원합니까? –
고마워. 나는 그것이 어떻게 작동하는지 정확히 볼 것이다. 그러나 그것은 CSS를 처음 보는 것처럼 보인다. 그러나 모든 브라우저에서 같은지 궁금합니다. – John
테스트를 아웃 : http://fiddle.jshell.net/8xZNY/show/
결과 :
당신은 두 번째 선언으로 background 속성을 덮어은, 그래서 아니, 그들은 두 번 다운로드되지 않습니다. 마지막 하나만 실제로 사용됩니다.
감사합니다. 블렌더. 당신은 위대한 소프트웨어이고 당신도 약간의 CSS를 알고 있습니다. 굉장해. – John
[여기] (http://stackoverflow.com/questions/7345505/overiding-css-background-image-styles-both-images-are-loaded)이 주제에 대한 비슷한 게시물. – Xareyo