当使用负Z指数时，灰度效应不起作用

我创建了这个jsbin网页，向您展示了什么即时通讯尝试解释..效果只适用于
当使用正Z指标，但如果我改变例如Z- #flower id
的索引为-2，#front id为-1，但它不再有效......我不知道为什么会发生这种情况。任何解释
将非常感激。当使用负Z指数时，灰度效应不起作用

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%); 
     }

来源

2014-04-08 user3013745

看起来它工作正常，我在Chrome中。这个浏览器是否特定？ –

身体是否具有隐含的z-索引0？ – vogomatix

你可能想看看[THIS]（https://bugzilla.mozilla.org/show_bug.cgi?id=78087） –

完全不相关的z指数，但你的SVG ID不匹配的URL锚，所以它必须在壁虎被打破。

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

除此之外，无法重现描述错误汇市28也不铬33

来源

2014-04-08 15:19:22 myf

当使用负Z指数时，灰度效应不起作用

回答

相关问题