css实现图片倒影效果

来源：蓝色理想时间：2007-11-05 18:29:00　

请问css如何实现一张图片的倒影。出来的效果就像这样：

下面是使用了滤镜来实现倒影的效果：

下面的代码支持FF：

效果一：

<!DOCTYPE HTML PUBLIC#"-//W3C/DTD HTML 4.0//EN" "http://www.w3c.org/tr/html4/strict.dtd"><html><head><title>css实现图片倒影效果 - asp之家</title><style>#aa{position:relative;width:128px;height:168px}</style><script language="javascript">function aab(){aaa=""ja=""for(i=129,a=40;i<168;i++,a--){ja+="<div style='overflow:hidden;width:128px;height:1px;position:absolute;top:"+i+"px;left:0px;filter:alpha(opacity="+a+");opacity:"+(a/100)+"'><img src='/file/UploadPic/200711/5/2007115184652274.jpg' style='margin:-"+(128-(i-128))+"px 0px 0px 0px'></div>"}aa.innerHTML+=ja}</script><body onload="aab()"><div id="aa"><img src="https://img.aspxhome.com/file/UploadPic/200711/5/2007115184652274.jpg" width="128" height="128"></div></body></html>

效果二：

<!DOCTYPE HTML PUBLIC#"-//W3C/DTD HTML 4.0//EN" "http://www.w3c.org/tr/html4/strict.dtd"><html><head><title>css实现图片倒影效果 - asp之家</title><style>#aa{position:relative;width:128px;height:168px}</style><script language="javascript">function aab(){aaa=""ja=""for(i=129,a=40;i<168;i++,a--){ja+="<div style='overflow:hidden;width:128px;height:1px;position:absolute;top:"+i+"px;left:"+(i-129)+"px;filter:alpha(opacity="+a+");opacity:"+(a/100)+"'><img src='/file/UploadPic/200711/5/2007115184652274.jpg' style='margin:-"+(128-(i-128))+"px 0px 0px 0px'></div>"}aa.innerHTML+=ja}</script><body onload="aab()"><div id="aa"><img src="https://img.aspxhome.com/file/UploadPic/200711/5/2007115184652274.jpg" width="128" height="128"></div></body></html>

标签：倒影,图片,css

投稿

css实现图片倒影效果

猜你喜欢

python入门：这篇文章带你直接学会python

python学习-List移除某个值remove和统计值次数count

SQL Server误区30日谈第1天正在运行的事务在服务器故障转移后继续执行

python新手经常遇到的17个错误分析

sqlserver 存储过程带事务拼接id 返回值

python使用sorted函数对列表进行排序的方法

MySQL如何根据不同条件联查不同表的数据if/case

torch.utils.data.DataLoader与迭代器转换操作

MySQL 的模块不能安装的解决方法

Vue的el-scrollbar实现自定义滚动

golang 防缓存击穿singleflight的实现

python中lambda函数 list comprehension 和 zip函数使用指南

在Lighttpd服务器中运行Django应用的方法

sql server 表结构修改方法

超详细汇总21个值得收藏的mysql优化实践

Python解析、提取url关键字的实例详解

在SQL Server中实现最短路径搜索的解决方法

如何用Python写一个简单的通讯录

Python GDAL库在Anaconda环境中的配置方法

tensorflow常用函数API介绍

css实现图片倒影效果

猜你喜欢

python入门：这篇文章带你直接学会python

python学习-List移除某个值remove和统计值次数count

SQL Server误区30日谈 第1天 正在运行的事务在服务器故障转移后继续执行

python新手经常遇到的17个错误分析

sqlserver 存储过程带事务 拼接id 返回值

python使用sorted函数对列表进行排序的方法

MySQL如何根据不同条件联查不同表的数据if/case

torch.utils.data.DataLoader与迭代器转换操作

MySQL 的模块不能安装的解决方法

Vue的el-scrollbar实现自定义滚动

golang 防缓存击穿singleflight的实现

python中lambda函数 list comprehension 和 zip函数使用指南

在Lighttpd服务器中运行Django应用的方法

sql server 表结构修改方法

超详细汇总21个值得收藏的mysql优化实践

Python解析、提取url关键字的实例详解

在SQL Server中实现最短路径搜索的解决方法

如何用Python写一个简单的通讯录

Python GDAL库在Anaconda环境中的配置方法

tensorflow常用函数API介绍

SQL Server误区30日谈第1天正在运行的事务在服务器故障转移后继续执行

sqlserver 存储过程带事务拼接id 返回值