如何使用-moz-element（）創建反射？

我有一個使用下面的代碼插件：如何使用-moz-element（）創建反射？

.ms-caro3d-template .ms-slide{ 
    -webkit-box-reflect: below 1px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(90%, transparent), to(rgba(255,255,255,0.5))); 
}

所以我看着CSS Reflections on Can I Use.com學習，這是一個目前只-webkit-財產，至少在這一點上。

但是，我用能說，Similar effect can be achieved in Firefox 4+ using the -moz-element() background property

我將如何實現使用-moz-element()類似的效果？

來源

2015-05-13 L84

你匹配了兩種完全拋棄屬性...

關於元素的背景，在我看來，非常遺憾，它沒有趕上..

.test { 
 
    width: 760px; 
 
    height: 560px; 
 
    background-image: url(http://placekitten.com/1000/750); 
 
    position: relative; 
 
} 
 

 

 
.test { 
 
    -webkit-box-reflect: below 1px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(40%, transparent), to(rgba(255,255,255,0.7))); 
 
} 
 

 
.mirror { 
 
    content: ""; 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100%; 
 
    bottom: -1px; 
 
    left: 0px; 
 
    transform: rotateX(180deg); 
 
    transform-origin: bottom center; 
 
    background-image: linear-gradient(180deg, white 50%, transparent), -moz-element(#cat); 
 
    
 
}

<div class="test" id="cat"><div class="mirror"></div></div>

FF中的僞元素被賦予與貓相同的背景，旋轉以及它應用的透明效果（假）。

來源

2015-05-13 17:30:03 vals

我希望CSS Reflections能夠在FF和MS中獲得更多人氣。他們看起來不錯。無論如何處理靜態圖像而不是背景圖像？（我知道圖像不支持僞元素。） – L84

是的，當然，只需使用我給僞元素設置的樣式設置另一個元素即可。關於background-image：元素的好處在於它能夠與元素之間的絕對獨立關係一起工作（它只是定位了id） – vals

如何使用-moz-element（）創建反射？

回答

相關問題