음수 Z- 인덱스를 사용할 때 그레이 스케일 효과가 작동하지 않습니다

Question

설명해 주려고하는 것을 보여주기 위해이 jsbin 웹 페이지를 만들었습니다. 긍정적 인 z- 색인을 사용할 때 효과는 단지
일뿐입니다. 예를 들어 z- #flower id
의 인덱스가 -2로, #front id가 -1로 바뀌면 더 이상 작동하지 않습니다 ... 왜 이런 일이 발생하는지는 잘 모릅니다. 모든 설명
정말 감사하겠습니다.

http://jsbin.com/xexusaci/1/edit

#flower{ 
      position:relative; 
      top:-600px; 
      left:50px; 
      z-index:1; 
     } 

     #front { 
      z-index:2; 
      position:relative; 
      top:100px; 
      height:600px; 
      width:100%; 
      background-color:lightblue; 
     } 

     #flower{ 
      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>#grayscalerayscale"); 
      filter: gray; 
      -webkit-filter: grayscale(100%); 
      -moz-transition: all 0.5s ease-in-out; 
      -webkit-transition: all 0.5s ease-in-out; 
      transition: all 0.5s ease-in-out; 
     } 

     #flower:hover { 
      filter: none; 
      -webkit-filter: grayscale(0%); 
     } 

Answer 1

는 Z-지수는 무관하지만 SVG ID는 URL의 앵커 일치하지 않기 때문에이 게코 깨진해야합니다. 그 외에는

url("data:...filter id='grayscale'...#grayscalerayscale") 

, 그것은 크롬에서 나에게 잘 작동처럼 33