html - 使用负 z-index 时灰度效果不起作用

Question

我创建了这个 jsbin 网页来向您展示我试图解释的内容。效果只是
使用正 z-index 时很好，但是如果我将 #flower id 的 z-index
更改为 -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-indices 无关，但您的 SVG ID 与 URL anchor 不匹配，因此它必须在 Gecko 中被破坏。

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

除此之外，无法在 Fx 28 或 Chrome 33 中重现所描述的错误。