位置：首页>> 网络编程>> 网页设计>> Magic Photo Frame 神奇创意相框

Magic Photo Frame 神奇创意相框

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

标签：css,相框,photo

神奇创意相框！是的，主要利用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>

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

投稿

Magic Photo Frame 神奇创意相框

猜你喜欢