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

【问题标题】：grayscale effect doesnt work when using negative z-index使用负 z-index 时灰度效果不起作用
【发布时间】：2014-04-08 23:19:22
【问题描述】：

我创建了这个 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%);
        }

【问题讨论】：

看起来它在 Chrome 中对我来说很好用。这个浏览器是特定的吗？
body 的隐含 z-index 是否为 0？
你可能想看看THIS
很老的bug，假设是固定的

标签： html css z-index grayscale

【解决方案1】：

与 z-indices 无关，但您的 SVG ID 与 URL 锚点不匹配，因此它必须在 Gecko 中被破坏。

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

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

【讨论】：