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锚点不匹配，因此必须在Gecko中将其中断。

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

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

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

1 个答案: