當使用負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指數時，灰度效應不起作用

回答

相關問題