CSS图片倒影效果兼容firefox、IE等各主流浏览器
发布时间:2012-12-27 17:49:20 作者:佚名 我要评论
无需flash,完全用css就可以做出超炫的图片倒影效果,大伙不要不信;网上流传很多种版本,经过本人的一番研究,做成能够兼容firefox、chrome、IE等各主流浏览器的版本,跟大家分享一下
无需flash,完全用css就可以做出超炫的图片倒影效果。网上流传很多种版本,经过本人的一番研究,做成能够兼容firefox、chrome、IE等各主流浏览器的版本,跟大家分享一下。最终完成的效果
新浏览器的实现
指的是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
<div class="wrap">
<div class="image"><img src="1.jpg" /></div>
<div class="down">
<div class="reflection"></div>
<div class="overlay"></div>
</div>
</div>
CSS
body{background:#000;color:#f00}
.wrap{position:relative;}
.image{margin-bottom:3px;}
.down{position: relative;}
.reflection{width:421px;height:180px;background:url(1.jpg) bottom center no-repeat;
-webkit-transform: scaleY(-1);
-moz-transform: scaleY(-1);
-ms-transform: scaleY(-1);
-o-transform: scaleY(-1);
transform: scaleY(-1);
opacity:0.5;
filter:alpha(opacity='50');
}
.overlay{position: relative;width:421px;height:180px;bottom:149px;
background-image: -moz-linear-gradient(center bottom, rgb(0,0,0) 20%, rgba(0,0,0,0) 90%);
background-image: -o-linear-gradient(rgba(0,0,0,0) 10%, rgb(0,0,0) 30%);
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.20, rgb(0,0,0)), color-stop(0.90, rgba(0,0,0,0)));
filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColor=0, EndColorStr=#000000);
}
在倒转的图片上面还加了一个DIV.overlay层,做出渐变的效果,使倒影看起来更真实。
兼容旧浏览器的实现
考虑到还有相当多的人在使用旧版浏览器,程序员绞尽脑汁为这部分人做兼容。这里指的是IE7/IE8。IE6怎么办?提示用户升级浏览器吧。
旧IE不支持transform属性,可以使用滤镜 filter:flipv 来生成图片倒转,但会跟IE9的transform冲突。所以要用到各种 hack 来解决。修改后的CSS如下,添加了IE9 hack,覆盖掉上面的filter:flipv的属性。
body{background:#000;color:#f00}
.wrap{position:relative;}
.image{margin-bottom:3px;}
.down{position: relative;}
.reflection{width:421px;height:180px;background:url(1.jpg) bottom center no-repeat;
-webkit-transform: scaleY(-1);
-moz-transform: scaleY(-1);
-ms-transform: scaleY(-1);
-o-transform: scaleY(-1);
transform: scaleY(-1);
opacity:0.5;
filter:flipv alpha(opacity='50'); /*ALL IE*/
}
@media all and (min-width:0) {
.reflection{filter:alpha(opacity='50') \0/;} /*IE9*/
}
.overlay{position: relative;width:421px;height:180px;bottom:149px;
background-image: -moz-linear-gradient(center bottom, rgb(0,0,0) 20%, rgba(0,0,0,0) 90%);
background-image: -o-linear-gradient(rgba(0,0,0,0) 10%, rgb(0,0,0) 30%);
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.20, rgb(0,0,0)), color-stop(0.90, rgba(0,0,0,0)));
filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColor=0, EndColorStr=#000000);
}
运行一下,在各版本的浏览器能看到最终的效果了。
新浏览器的实现
指的是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
复制代码
代码如下:<div class="wrap">
<div class="image"><img src="1.jpg" /></div>
<div class="down">
<div class="reflection"></div>
<div class="overlay"></div>
</div>
</div>
CSS
复制代码
代码如下:body{background:#000;color:#f00}
.wrap{position:relative;}
.image{margin-bottom:3px;}
.down{position: relative;}
.reflection{width:421px;height:180px;background:url(1.jpg) bottom center no-repeat;
-webkit-transform: scaleY(-1);
-moz-transform: scaleY(-1);
-ms-transform: scaleY(-1);
-o-transform: scaleY(-1);
transform: scaleY(-1);
opacity:0.5;
filter:alpha(opacity='50');
}
.overlay{position: relative;width:421px;height:180px;bottom:149px;
background-image: -moz-linear-gradient(center bottom, rgb(0,0,0) 20%, rgba(0,0,0,0) 90%);
background-image: -o-linear-gradient(rgba(0,0,0,0) 10%, rgb(0,0,0) 30%);
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.20, rgb(0,0,0)), color-stop(0.90, rgba(0,0,0,0)));
filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColor=0, EndColorStr=#000000);
}
在倒转的图片上面还加了一个DIV.overlay层,做出渐变的效果,使倒影看起来更真实。
兼容旧浏览器的实现
考虑到还有相当多的人在使用旧版浏览器,程序员绞尽脑汁为这部分人做兼容。这里指的是IE7/IE8。IE6怎么办?提示用户升级浏览器吧。
旧IE不支持transform属性,可以使用滤镜 filter:flipv 来生成图片倒转,但会跟IE9的transform冲突。所以要用到各种 hack 来解决。修改后的CSS如下,添加了IE9 hack,覆盖掉上面的filter:flipv的属性。
复制代码
代码如下:body{background:#000;color:#f00}
.wrap{position:relative;}
.image{margin-bottom:3px;}
.down{position: relative;}
.reflection{width:421px;height:180px;background:url(1.jpg) bottom center no-repeat;
-webkit-transform: scaleY(-1);
-moz-transform: scaleY(-1);
-ms-transform: scaleY(-1);
-o-transform: scaleY(-1);
transform: scaleY(-1);
opacity:0.5;
filter:flipv alpha(opacity='50'); /*ALL IE*/
}
@media all and (min-width:0) {
.reflection{filter:alpha(opacity='50') \0/;} /*IE9*/
}
.overlay{position: relative;width:421px;height:180px;bottom:149px;
background-image: -moz-linear-gradient(center bottom, rgb(0,0,0) 20%, rgba(0,0,0,0) 90%);
background-image: -o-linear-gradient(rgba(0,0,0,0) 10%, rgb(0,0,0) 30%);
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.20, rgb(0,0,0)), color-stop(0.90, rgba(0,0,0,0)));
filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColor=0, EndColorStr=#000000);
}
运行一下,在各版本的浏览器能看到最终的效果了。
相关文章
- 使用纯CSS实现未知尺寸的图片(但高宽都小于200px)在200px的正方形容器中水平和垂直居中,下面是一个权衡的相对结构干净,CSS简单的解决方法2013-04-17
- 浏览网页时经常会碰到图文并茂的文章,如果图片的尺寸过大,常会把页面结构撑得变形直接影响了界面美观度,一直用DIV+CSS的方式来制作页面,发现用CSS来得更方便,相信处理2013-03-28
一个新的CSS图片替换的技巧(背景显示与文本移离屏)告别9999px
-9999 px的形象替代技术已经流行了一个十年最好的部分。一项新技术已被发现,可以提高性能,因为浏览器的不再画一个9999 px箱在幕后2012-12-30- 有很多种方法来实现图片的预加载,通常大部分使用Javascript让事情滚动。不要再受Javascript预载的束缚了吧,用CSS你就可以毫不麻烦的预载你的图片,需要的朋友可以了解下2012-12-19
- 今天处理了一个页面刷新随机显示图片的功能,发现直角太丑,想实现图片圆角,兼容所有浏览器,于是网上搜集整理了一下,拿出来和大家分享2012-12-06
- 看到问此问题的很多,所以花点时间整理下,欢迎大家提意见,做补充修改,谢谢2012-01-21
- CSS图片垂直居中问题,困扰了我许久,今天终于可以总结下来了2012-01-21
- CSS图片提取工具,是我为了方便制作网站而编写的一个小巧的工具。它功能单一,但可以省去不少的麻烦2011-10-09
- 如今DIV+CSS的网站设计成为主流,越来越的图片不直接插在HTML中而选择用CSS来展示了,这为仿站带来很大的困难。2011-09-20
- 动画效果的CSS图片导航菜单特效,鼠标放到图片上,会出现菜单提示,因为是用CSS实现的动画效果,所以流畅度当然没有JavaScript和Flash的效果好,仅供参考。2010-11-18
最新评论