CSS3 필터는 로컬 호스트에서 작동하지만 원격 호스트에서는 작동하지 않습니다.

Question

현재 해결 방법을 모르는 문제가 있습니다. 일부 이미지에 CSS3 그레이 스케일 필터를 적용하는 동안 내 로컬 호스트에서 작동하지만 라이브 사이트에서 이미지는 흰색으로 표시됩니다 (즉, 보이지 않습니다).

관련 CSS :

.preview .preview-thumb { 
    width: 200px; 
    height: 150px; 
    -webkit-filter: grayscale(100%); 
    -moz-filter: grayscale(100%); 
    -ms-filter: grayscale(100%); 
    -o-filter: grayscale(100%); 
    filter: grayscale(100%); 
    filter: url(grayscale.svg#greyscale); 
    filter: gray; 
} 

.preview:hover .preview-thumb { 
    -webkit-box-shadow: 0 0 3px 3px gray; 
    -moz-box-shadow: 0 0 3px 3px gray; 
    box-shadow: 0 0 3px 3px gray; 
    -webkit-filter: none; 
    -moz-filter: none; 
    -ms-filter: none; 
    -o-filter: none; 
    filter: none; 
} 

관련 HTML :

<div class="preview-container" data-category-id="3"> 
    <div class="preview"> 
    <a href="project.php?id=3"> 
     <img class="preview-thumb" src="projects/architectuur/Masterproject Wilsele/grote maquette.jpg"/> 
    </a> 
    <span class="preview-name">Masterproject Wilsele</span> 
    </div> 
</div> 

관련 디렉토리 구조 : 원격 호스트에 잘못된 출력 (라이브 : 로컬 호스트에

/ 
    css 
    grayscale.svg 
    style.css 
    page.html 

올바른 출력 사이트) :

두 스크린 샷은 동일한 브라우저 (Ubuntu 14.04의 Firefox 33.0)를 사용하여 만들었습니다. Chrome (Version 38.0.2125.104 (64-bit) in Ubuntu 14.04)을 사용하면 모든 것이 잘 작동하므로 내 생각에이 문제는 url(grayscale.svg#greyscale) 해킹에서 비롯된 것으로 추측됩니다.

해결 방법에 대한 아이디어가 있으십니까? 현재 사용중인 SVG 파일은 this site에서 다운로드됩니다.

Answer 1

사람들이 SVG 파일에 "로컬 호스트에서 작동하지만 원격 서버에서는 작동하지 않음"문제가있을 때마다 항상 웹 서버가 SVG 파일에 올바른 MIME 유형을 반환하지 않는 것으로 나타납니다.

웹 서버가 콘텐츠 유형이 "image/svg + xml"인 grayscale.svg 파일을 반환하는지 확인하십시오. 가장 간단한 검사 방법은 브라우저의 "도구"도구에서 "인터넷"탭을 사용하는 것입니다. 당신은 SVG를로드 할 수 있도록 콘텐츠 보안 정책 헤더를 수정해야

Content Security Policy: The page's settings blocked the loading of a resource at 
      http://corporaal.be/css/grayscale.svg ("default-src 'none'"). 

:

업데이트

실제 현장을보고 난 후에 나는 콘솔에서이 경고를 발견했다. default-src를 'self'로 변경해보십시오.