CSS图片倒影效果兼容firefox、IE等各主流浏览器

要实现CSS图片倒影效果，在多个主流浏览器上兼容并不是一件容易的事情。下面是实现该效果的完整攻略。

1.使用webkit内核的浏览器

webkit内核的浏览器包括Google Chrome、Safari等等。

在这些浏览器中，可以使用CSS3的属性实现图片倒影效果：

img {
  -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(70%, transparent), to(rgba(255, 255, 255, 0.15)));
}

这里，-webkit-box-reflect属性是CSS3的属性之一，它用于在元素的底部创建一个倒影。其中，below 0px表示倒影位置在原始图片的下方，而数值0则表示倒影与图片之间没有间距。接下来的部分是用渐变来制作倒影的效果。要注意的是，由于Chrome和Safari都是webkit内核的浏览器，所以这个方法适用于两种浏览器。

2.使用IE浏览器

IE浏览器并不支持CSS3的-webkit-box-reflect属性。但是，我们可以使用filter滤镜来制作图片倒影效果。下面的代码可以在IE9以上的版本中使用：

img {
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1, mirror=1)";
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1, mirror=1);
}

上面的代码使用了IE浏览器的filter滤镜，它是一种过滤元素效果的CSS属性，可以用于在IE浏览器中制作图片倒影效果。要注意的是，由于不同版本的IE浏览器可能会有不同的语法要求，所以我们同时使用了-ms-filter和filter两个属性来处理IE浏览器。

3.使用其他主流浏览器

对于其他主流浏览器，如Firefox等，我们可以使用JavaScript来模拟图片倒影效果。

<div class="reflection-wrap">
  <img src="http://example.com/image.jpg" alt="example image" />
  <canvas class="reflection-canvas"></canvas>
</div>

.reflection-wrap {
  position: relative;
}

.reflection-canvas {
  position: absolute;
  left: 0;
  bottom: -5px;
  width: 100%;
  height: 100%;
  -webkit-transform: scaleY(-1);
  transform: scaleY(-1);
  opacity: 0.5;
  filter: alpha(opacity=50);
}

(function() {
  var canvas = document.getElementsByClassName('reflection-canvas')[0];
  var context = canvas.getContext('2d');
  var img = new Image();
  img.src = 'http://example.com/image.jpg';
  img.onload = function() {
    var imgWidth = img.width;
    var imgHeight = img.height;
    canvas.width = imgWidth;
    canvas.height = imgHeight;
    context.drawImage(img, 0, 0, imgWidth, imgHeight);
    context.scale(1, -1);
    context.drawImage(img, 0, -imgHeight*2, imgWidth, imgHeight);
    context.restore();
  }
})();

上面的代码使用了canvas元素来实现倒影效果。其中，我们使用了JavaScript的new Image()方法来加载原始图片，然后通过canvas的drawImage()方法来制作倒影图片。最后，我们使用了CSS的transform属性来翻转倒影图片。

以上就是实现CSS图片倒影效果兼容firefox、IE等各主流浏览器的完整攻略。您可以根据需要选择其中任意一种方法来实现您的效果。