• 首页>
  • 软件教程>
  • CSS图片倒影效果兼容firefox、IE吗？CSS图片倒影效果兼容说明

CSS图片倒影效果兼容firefox、IE吗？CSS图片倒影效果兼容说明

2024-06-24 10:34:17阅读量：38 字体：大 中 小

无需flash，完全用css就可以做出超炫的图片倒影效果。网上流传很多种版本，经过本人的一番研究，做成能够兼容firefox、chrome、IE等各主流浏览器的版本，跟大家分享一下。最终完成的效果

CSS图片倒影效果兼容firefox、IE吗？CSS图片倒影效果兼容说明

新浏览器的实现

指的是firefox、chrome和IE9。新浏览器都支持CSS3新添的transform属性，所以实现倒影效果非常简单。从下面的代码看到，各家浏览器对transform的实现有点不同

-webkit-transform: scaleY(-1); /* webkit内核浏览器的实现，例如safari */

-moz-transform: scaleY(-1); /* firefox 的实现 */

-ms-transform: scaleY(-1); /* IE 的实现 */

-o-transform: scaleY(-1); /* Opera的实现 */

HTML


CSS


在倒转的图片上面还加了一个DIV.overlay层，做出渐变的效果，使倒影看起来更真实。

兼容旧浏览器的实现

考虑到还有相当多的人在使用旧版浏览器，程序员绞尽脑汁为这部分人做兼容。这里指的是IE7/IE8。IE6怎么办?提示用户升级浏览器吧。

旧IE不支持transform属性，可以使用滤镜 filter:flipv 来生成图片倒转，但会跟IE9的transform冲突。所以要用到各种 hack 来解决。修改后的CSS如下，添加了IE9 hack，覆盖掉上面的filter:flipv的属性。

运行一下，在各版本的浏览器能看到最终的效果了。

免责声明：

本文《CSS图片倒影效果兼容firefox、IE吗？CSS图片倒影效果兼容说明》版权归原作者所有,内容不代表本站立场！

如本文内容影响到您的合法权益（含文章中内容、图片等），请及时联系本站，我们会及时删除处理。

推荐阅读

  • 抖音怎么0.5倍速播放

    抖音怎么0.5倍速播放

    抖音视频播放有四种倍速选择，要设置0.5倍播放，在视频播放中即可直接设置。具体操作方法如下： 抖音怎么0.5倍速播放 1、打开手机抖音app，进入视频播放，长按视频，进入播放设置页面。 2、点击倍速...

    阅读: 782

  • 删除微信表情包

    删除微信表情包

    很多人的微信添加了很多表情包，如果要将微信内添加的表情包删除，进入微信的表情功能页面即可进行删除。具体操作方法如下： 删除微信表情包 1、打开手机微信app，点击我”，再点击表情&rdqu...

    阅读: 787

  • 家人地图如何开启永久位置

    家人地图如何开启永久位置

    家人地图是高德地图推出的家人定位查询功能，要开启家人地图永久位置分享，可以直接在家人地图设置中开启。具体操作方法如下： 家人地图如何开启永久位置 1、打开手机高德地图app，点击我的”。 ...

    阅读: 838

  • 快手号怎么修改不了,只有复制

    快手号怎么修改不了,只有复制

    快手号只有复制，修改不了，是因为近期已经修改过快手号了，从修改时开始需要等待90天后才能再次修改。修改快手号的具体操作方法如下： 快手号怎么修改不了,只有复制 1、打开手机快手app，点击左上角三条横...

    阅读: 721

  • qq群怎么设置不让群成员加好友

    qq群怎么设置不让群成员加好友

    qq群目前还不能设置不让群成员加好友，只能设置不让群里的人发起临时会话减少群员的互动性。设置不让群里的人发起临时会话的具体操作如下： qq群怎么设置不让群成员加好友 1、打开手机QQ软件，找到自己创建...

    阅读: 700

  • 朋友圈设置三天可见是对所有人吗

    朋友圈设置三天可见是对所有人吗

    朋友圈三天可见是针对朋友圈的一个设置，针对所有的朋友，朋友圈设置三天可见后，所有朋友只能看到你最近三天的朋友圈。朋友圈设置三天可见的具体操作如下： 朋友圈设置三天可见是对所有人吗 1、打开手机微信ap...

    阅读: 730

热门文章

最近更新