Firefox 필터 그레이 스케일 및 인쇄

인쇄 된 페이지에서 Firefox의 필터 CSS 속성을 그레이 스케일로 올바르게 가져 오는 데 문제가 있습니다. 어떤 이유로 인해 회색 음영 이미지가 예상대로 화면에 표시되지만 인쇄물에 표시되지 않습니다. this one 같은 질문을 언급 한 후, 내가 (문제를 보여 간체)이 시점에 들어 왔 : 여기Firefox 필터 그레이 스케일 및 인쇄

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<html> 
    <head> 
     <title></title> 
     <style type="text/css"> 
      .grayscale { 
       filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+ */ 
       filter: gray; /* IE6-9 */ 
       -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */ 
       filter: grayscale(100%); 
      } 
      img { 
       width:100px; 
      } 
     </style> 
    </head> 
    <body> 
     <img class="grayscale" src="http://alltheragefaces.com/img/faces/png/rage-nuclear.png" /> 
     <img src="http://alltheragefaces.com/img/faces/png/rage-nuclear.png" /> 
    </body> 
</html>

을 그리고 이것에 대한 가능한 해결 방법이있는 fiddle

, 또는 뭔가를하고있는 중이 야 잘못된? 필터를 다른 요소에 적용하면 같은 문제가 발생하는 것 같습니다. 나는 건설적인 의견에 크게 감사 할 것입니다.

참고 :이 거의 파이어 폭스의 브라우저 버그가 나타납니다 밝혀 파이어 폭스 v20.0.1

출처

2013-05-06 dasch88

+1을 저장하는 데 도움이 ... 내가 IE에서 기대할 수있는 물건의 종류이다. –

그래서 명확히하기 위해 화면에서 볼 때 이미지는 회색 음영 처리되지만 화면의 내용을 인쇄 할 때 그레이 스케일은 인쇄 된 이미지 (용지?)에 적용되지 않습니다. – jezzipin

닫기, 오히려 그레이 스케일 된 이미지가 전혀 보이지 않습니다. 예를 들어, 바이올린 페이지 자체를 인쇄하더라도 회색조 이미지는 보이지 않지만 (레이아웃 공간은 여전히 보존되어 있지만) 컬러 이미지 만 표시됩니다. – dasch88

사용. 브라우저에서 찾을 수없는 svg를 참조 할 때 (화면에서) 언제든지 인쇄 할 때와 똑같은 문제가 발생합니다. 이미지 레이아웃은 예약되지만 빈 공간이됩니다. 이것은 화면이 아닌 프린터 용으로로드 할 때 /로드 할 수있는 점에 차이가 있는지 궁금해하기 때문에 svg를로드/참조하는 다른 방법을 시도하기 시작했습니다. 별도의 CSS 파일, 인 페이지 클래스 및 인라인 스타일로 필터를 정의하는 것과 함께 html의 ID와 인라인에서 별도의 파일에서 svg를로드하려고 시도했습니다. 모든 조합 중에서 다음과 같이 작동합니다.

svg를 html로 정의하고 인라인 스타일 또는 인 페이지 CSS 클래스를 사용하여 참조하십시오.

나는 이상하게 들리지만 문자 그대로 그 밖의 모든 것은 내가 똑같이하고 있지만 외부 CSS 파일에 필터 CSS 속성을 설정하는 것을 포함하여 휴식을 시도했다는 것을 알고있다.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<html> 
    <head> 
     <title></title> 
     <style type="text/css"> 
      .grayscale { 
       filter: url(#grayscale); /* Firefox 10+ */ 
       filter: gray; /* IE6-9 */ 
       -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */ 
      } 
      img { 
       width:100px; 
      } 
     </style> 
    </head> 
    <body> 
     <img class="grayscale" src="http://alltheragefaces.com/img/faces/png/rage-nuclear.png" /> 
     <img src="http://alltheragefaces.com/img/faces/png/rage-nuclear.png" /> 
     <svg xmlns='http://www.w3.org/2000/svg' height="0px"> 
      <filter id='grayscale'> 
       <feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0  0  
                0.3333 0.3333 0.3333 0  0  
                0.3333 0.3333 0.3333 0  0  
                0  0  0  1  0'/> 
      </filter> 
     </svg> 
    </body> 
</html>

그리고 다시, 인쇄 및 현재 파이어 폭스에서 잘 이미지를 볼 수있는 수정 된 fiddle : 인 페이지 수준의 접근 방식을 가고, 여기에 고정 된 HTML의 모습거야.

Siiigh이 희망 제대로 복잡한 질문을하는 방법을 아는에 대해 누군가에게 약간의 시간/슬픔/살인의 생각

출처

2013-05-09 20:06:04 dasch88

Linux에서 Chrome 43에서는 fiddle이 회색 음영 이미지를 인쇄하지 않습니다. 슬프게도. –

Firefox 필터 그레이 스케일 및 인쇄

답변

관련 문제