Magic Photo Frame 神奇创意相框

作者：wkaifang 来源：蓝色理想时间：2009-09-15 20:45:00　

神奇创意相框！是的，主要利用position的relative, absolute, z-index属性。结合Photo Frame（相框）的不规则性，来“裁剪”出具有不同Magic（神奇？）的相框效果。

先看例一，如果让Photo Frame（相框）遮罩目标的相片？

运行代码框

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Magic Photo Frame 神奇创意相框</title><style type="text/css">*{ text-align:center; border:0; list-style:none;}body{ font-size:12px; font-family:Tahoma, Geneva, sans-serif; background:#000;}.photo{ width:404px; margin:0 auto; border-left:solid 2px #333; border-right:solid 2px #333; background:#fff;}.photo h1{ font-size:14px; color:#666; line-height:40px;}.photo ul{ margin:0; padding:0;}.photo li{ position:relative; width:400px; height:300px; overflow:hidden;}.magic1{ position:absolute; top:0; left:0; width:100％; height:100％;}.magic1{ background: url(/articleimg/2009/09/7006/01.png) no-repeat;}</style></head><body><div class="photo"> <h1>Magic Photo Frame 神奇创意相框</h1> <ul> <li> <img src="https://img.aspxhome.com/fileimg/2009/09/7006/mm.jpg" width="400" height="300" /><em class="magic1"> </em> </li> </ul></div></body></html>

在这里，主要应用magic1的背景图片，结合具有相对定位元素的em，再加上z-index。使得em中的背景可以遮罩在相片之上。

接着，我们需要修饰下，希望鼠标浮动的时候会产生提示效果的文字，并且结合半透明的css参数

filter:alpha(opacity=70); /* for ie */
-moz-opacity: 0.7; /* for ff */
opacity: 0.7; /* for other */

使得鼠标浮动到照片上，出现遮罩效果，并且出现提示文字。再次看例子：

运行代码框
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Magic Photo Frame 神奇创意相框</title><style type="text/css">*{ text-align:center; border:0; list-style:none;}body{ font-size:12px; font-family:Tahoma, Geneva, sans-serif; background:#000;}.photo{ width:404px; margin:0 auto; border-left:solid 2px #333; border-right:solid 2px #333; background:#fff;}.photo h1{ font-size:14px; color:#666; line-height:40px;}.photo ul{ margin:0; padding:0;}.photo li{ position:relative; width:400px; height:300px; overflow:hidden;}.photo li a:link span,.photo li a:visited span{ display:none;}.photo li a:hover span{ display:block; text-align:center; position:absolute; top:0; left:0; width:100％; height:100％; font-size:40px; line-height:300px; color:#f00; background:#000; filter:alpha(opacity=70); -moz-opacity: 0.; opacity: 0.7;}.magic1{ position:absolute; top:0; left:0; width:100％; height:100％;}.magic1{ background: url(/articleimg/2009/09/7006/01.png) no-repeat;}a:link,a:visited,a:hover{ text-decoration:none;}</style></head><body><div class="photo"> <h1>Magic Photo Frame 神奇创意相框</h1> <ul> <li> <a href="#"><img src="https://img.aspxhome.com/fileimg/2009/09/7006/mm.jpg" width="400" height="300" /><span>This is Magic!</span><em class="magic1"> </em></a> </li> </ul></div></body></html>

怎么样，效果是不是不错呢？既然不错的效果，顺便发挥下思维方向，扩散思维模式。再次做跟多的例子：

运行代码框
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Magic Photo Frame 神奇创意相框</title><style type="text/css">*{ text-align:center; border:0; list-style:none;}body{ font-size:12px; font-family:Tahoma, Geneva, sans-serif; background:#000;}.photo{ width:404px; margin:0 auto; border-left:solid 2px #333; border-right:solid 2px #333; background:#fff;}.photo h1{ font-size:14px; color:#666; line-height:40px;}.photo ul{ margin:0; padding:0;}.photo li{ position:relative; width:400px; height:300px; overflow:hidden;}.photo li a:link span,.photo li a:visited span{ display:none;}.photo li a:hover span{ display:block; text-align:center; position:absolute; top:0; left:0; width:100％; height:100％; font-size:40px; line-height:300px; color:#f00; background:#000; filter:alpha(opacity=70); -moz-opacity: 0.; opacity: 0.7;}.magic1,.magic2,.magic3{ position:absolute; top:0; left:0; width:100％; height:100％;}.magic1{ background: url(/articleimg/2009/09/7006/01.png) no-repeat;}.magic2{ background: url(/articleimg/2009/09/7006/02.png) no-repeat;}.magic3{ background: url(/articleimg/2009/09/7006/03.png) no-repeat;}a:link,a:visited,a:hover{ text-decoration:none;}</style></head><body><div class="photo"> <h1>Magic Photo Frame 神奇创意相框</h1> <ul> <li> <a href="#"><img src="https://img.aspxhome.com/fileimg/2009/09/7006/mm.jpg" width="400" height="300" /><span>This is Magic!</span><em class="magic1"> </em></a> </li> <li> <a href="#"><img src="https://img.aspxhome.com/fileimg/2009/09/7006/mm.jpg" width="400" height="300" /><span>This is Magic!</span><em class="magic2"> </em></a> </li> <li> <a href="#"><img src="https://img.aspxhome.com/file/UploadPic/20099/15/mm-39.jpg" width="400" height="300" /><span>This is Magic!</span><em class="magic3"> </em></a> </li> </ul></div></body></html>

嗯，看到例子，你想说写什么呢? 创意，在于思考与练习中产生，就这样。

标签：css,相框,photo

投稿

Magic Photo Frame 神奇创意相框

猜你喜欢

JS中的async与await怎么使用

解析Go语言编程中的struct结构

内容页页码的预览导航

用ASP实现IE地址栏参数的判断

在Windows下安装配置CPU版的PyTorch的方法

解读Python脚本的常见参数获取和处理方式

Python下opencv图像阈值处理的使用笔记

python识别验证码的思路及解决方案

JS统计Flash被网友点击过的代码

Tensorflow训练模型越来越慢的2种解决方案

pandas按某列降序的实现

Asp中如何快速分页的技巧

完美解决SQL server2005中插入汉字变成问号的问题

css基础教程属性篇之盒子模型

Orcas中C#语言的新特性：自动属性，对象初始化器，和集合初始化器

Python如何截图保存的三种方法(小结)

MySQL分页优化解析

js取得当前鼠标的X,Y坐标

Python小游戏之300行代码实现俄罗斯方块

Python时区设置方法与pytz查询时区教程