使用純CSS的圖像反射效果

Question

我在<img>標記中有圖像。我的目標是僅使用CSS創建該圖像的反射。 它也必須與所有瀏覽器兼容。我嘗試過各種方法來做到這一點他們中的一個在這個JS Fiddle

我想要什麼：
淡入到零不透明度從頂部的反射底部。目前它僅適用於使用-webkit-box-reflect和-webkit-gradient的組合的webkit瀏覽器。
我希望它也能在Mozilla上運行。

我現在所擁有的：
因爲它可以在JSfiddle可以看到我得到了它在WebKit的瀏覽器中使用的工作：

-webkit-box-reflect: below 0px 
-webkit-gradient(linear, left top, left bottombottom, from(transparent), color-stop(70%, transparent) , to(rgba(250, 250, 250, 0.1))); 

我試圖爲Mozilla如下：

#moz-reflect:after { 
    content: ""; 
    display: block; 
    background: -moz-element(#moz-reflect) no-repeat; 
    width: auto; 
    height: 200px; 
    margin-bottom: 100px; 
    -moz-transform: scaleY(-1); 
} 

其中#moz-reflect是<img>的容器格。

我很感謝能解決CSS問題的答案。有很多圖像（圖標）必須應用此效果。

如果沒有辦法可以在Mozilla中使用CSS，那麼我不介意走下JavaScript的道路。

更新 它具有其上可將圖像或黑色或其他顏色自定義背景的工作。

Answer 1

我已經改變了你的代碼完全，我使用CSS3漸變與transform財產，這是純CSS具有最大的兼容性。

在這裏，我使用的關鍵是應用了第二img的transform屬性，它現在用nth-of-type僞目標一起rgba()。

此外，請確保您，是因爲我使用:after僞來自底部漸變疊加稱爲父元素position: relative;，因此使用position: absolute;爲與bottom設置爲0

是Demo（已經做了一點這裏的錯誤使用rotate()因爲它不會給反射效果，只是將圖像旋轉，請參考我的第二個演示）

Demo 2（使用scale進行鏡像映像，也可以使用rotateY，正如評論中指出的那樣。）

#moz-reflect:after { 
    content:""; 
    width: 100%; 
    height: 200px; 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.67) 49%, rgba(255, 255, 255, 1) 100%); 
    /*I've removed proprietary gradient codes from here, you can get it in the demo*/ 
} 

#moz-reflect img:nth-of-type(2) { 
    -webkit-transform: scaleY(-1); 
     -moz-transform: scaleY(-1); 
     -ms-transform: scaleY(-1); 
     -o-transform: scaleY(-1); 
      transform: scaleY(-1); 
} 

#moz-reflect { 
    position: relative; 
} 

---

Demo 3（唯一的區別是，我使用height: 50%;爲:after假，所以我們不必硬編碼）

只有代碼在上面修改代碼塊是height屬性，它設置爲50%

#moz-reflect:after { 
    content:""; 
    width: 100%; 
    height: 50%; /* Changed the unit over here */ 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.67) 49%, rgba(255, 255, 255, 1) 100%); 
} 

---

注：中序創建漸變最適合，說黑色不透明的梯度將需要與黑色背景的網站，比你可以自己使用Color Zilla做。

圖像反射，使用black作爲bodybackground。只有上面代碼片段的變化是我正在將background: #000;應用到body，並且我已經相應地調整了漸變。

background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.67) 49%, rgba(0, 0, 0, 1) 100%); 

Demo（對於使用較暗的背景，黑色在這種情況下網站）

注：在黑色的演示

Answer 2

您還可以使用沒有添加漸變專有特性一個圖像元素以及::before和::after，但是它還不是很有用，因爲您必須對::before僞元素進行background-image:url()的硬編碼換貨。我發佈這個答案是因爲其他人可能想這樣做，並希望有一天我們能夠使用background-image: attr(src, url);語法。 （1）截至2014年6月，沒有瀏覽器支持。

小提琴：http://jsfiddle.net/DeedH/5/

我假設你有一個黑色的背景。

結構：

1. img - 主圖像（實際上顯示爲背景圖像），
2. ::before含有反射。必須是display:inline-block才能使用transform:scaleY翻轉圖像。包含漸變蒙版的
3. ::after。

html：（注意，目前沒有使用src）。

<img class="reflect" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSYXWxD2yC7m2m1ZylyVq_r6yWE4ewJv64cmt3CpgbGdqZq3wEx" /> 

的CSS：

.reflect { 
    position:relative; 
    display:block; 
    height:300px; 
    width:300px; 
    background-image:url('https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSYXWxD2yC7m2m1ZylyVq_r6yWE4ewJv64cmt3CpgbGdqZq3wEx'); 
    background-repeat:no-repeat; 
    background-size:contain; 
    content:''; 
} 
.reflect::before { 
    position:relative; 
    top:20%; 
    height:100%; 
    width:100%; 
    display: inline-block; 
    -moz-transform: scaleY(-.7); 
    -o-transform: scaleY(-.7); 
    -webkit-transform: scaleY(-.7); 
    transform:scaleY(-.7); 
    opacity:0.2; 
    background-image:url('https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSYXWxD2yC7m2m1ZylyVq_r6yWE4ewJv64cmt3CpgbGdqZq3wEx'); 
    background-repeat:no-repeat; 
    background-size:contain; 
    content:''; 
} 
.reflect::after { 
    position:relative; 
    top:-40%; 
    height:70%; 
    width:100%; 
    background-image:-webkit-radial-gradient(top center, 50% 75%, rgba(0,0,0,0), rgba(0,0,0,1)); 
    background-image:-moz-radial-gradient(top center, 50% 75%, rgba(0,0,0,0), rgba(0,0,0,1)); 
    background-image:-o-radial-gradient(top center, 50% 75%, rgba(0,0,0,0), rgba(0,0,0,1)); 
    background-image:radial-gradient(top center, 50% 75%, rgba(0,0,0,0), rgba(0,0,0,1)); 
    background-repeat:no-repeat; 
    background-size:contain; 
    content:''; 
} 

請注意，您必須使用在img本身content:'';，否則僞元素將不顯示。

另外請注意，這不適用於一類圖像，因爲您必須對圖像url進行硬編碼。但是，如果您使用id並使用js將規則寫入文檔級樣式表，這可能很有用。否則，這隻對單張圖像有幫助。 （1）

（1）。 Using HTML data-attribute to set CSS background-image url