CSS相框效果示例代码

相框效果想必大家都知道吧,那么使用css 如何实现呢?下面有个不错的示例,感兴趣的朋友可以参考下

 

 
效果图
1、CSS样式

复制代码
代码如下:

.pic .box{
background:url(/MyDemo/images/round1.png) no-repeat;
width:60px;
height:60px;
display:block;
_background:none;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/MyDemo/images/round1.png" ,sizingMethod="crop");
position:absolute;
width:60px;
height:60px;
z-index:9999;
}
.pic img{
width:60px;
height:60px;
}

2、HTML代码

复制代码
代码如下:

<!--相框-->
<div class="pic">
<span class="box"></span>
<img src="/images/myPic.jpg" />
</div>

附件
 
round.png

时间: 2025-01-21 18:51:11

CSS相框效果示例代码的相关文章

使用原生js实现页面蒙灰(mask)效果示例代码_javascript技巧

对于web应用开发者,当用户进行界面浏览时如果后台程序处理程序时间较长,那么用户在网页的等待时间会较长,但是如果页面上没有一个比较友好的提示方式 (增加蒙灰效果),那么用户体验会不是特别良好,用户不知道现在是不是应该点击别的程序,用户并不知道是不是应该继续等待网页,还是可以点击别的页面. 现在就有一个比较良好的交互,就是增加蒙灰效果.像js的框架Extjs的mask()和unmask()功能提供了蒙灰效果,当然jquery也提供了这种蒙灰方法.在此作者希望自己也能够 使用原生的js实现自己的蒙灰

jquery特效 幻灯片效果示例代码

jquery特效中的幻灯片想必大家已不陌生吧,下面为大家分享个比较不错的幻灯片效果,附有源码,感兴趣的朋友可以学习下哈   jquery特效 幻灯片效果,效果图如下:   复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf8" /> <title>jq

jquery div拖动效果示例代码

 div拖动效果想必大家都有见到过吧,实现的方法也是有很多的,下面为大家将介绍使用jquery是如何实现的,感兴趣的朋友不要错过 代码如下: <%@ page language="java" contentType="text/html; charset=utf-8"  pageEncoding="utf-8"%>  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transi

jquery实现鼠标拖动图片效果示例代码

 鼠标拖动图片的效果想必大家都有见到过吧,其实实现起来很简单的,下面使用query来实现下,感兴趣的朋友不要错过  代码如下: <!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/199

jquery实现多行文字图片滚动效果示例代码_jquery

今儿分享一个jquery实现多行滚动效果. 我看一些论坛网站上面,公告处用的较多. 代码如下 // 多行滚动 (function($){ $.fn.extend({ Scroll:function(opt,callback){ if(!opt) var opt={}; var _this=this.eq(0).find("ul:first"); var lineH=_this.find("li:first").height(), line=opt.line?pars

iOS实现爆炸的粒子效果示例代码_IOS

照例我们先看看效果图 怎么样?效果很不错吧,下面来一起看看实现的过程和代码示例. 实现原理 从图中可以大致看出,爆炸点点都是取的某坐标的颜色值,然后根据一些动画效果来完成的. 取色值 怎么取的view的某个点的颜色值呢?google一下,就可以找到很多答案.就不具体说了.创建1*1的位图,然后渲染到屏幕上,然后得到RGBA.我这里写的是UIView的extension. extension UIView { public func colorOfPoint(point:CGPoint) -> U

jQuery bxCarousel实现图片滚动切换效果示例代码_jquery

BxCarousel是一个具有众多配置且易用的Jquery图片滚动插件,特征主要有: ◆ 可以指定显示的元素总数 ◆ 可以指定每次滚动的元素个数 ◆ 自动播放模式 ◆ 前一张/后一张按钮控制图片流动 参数含义: display_num:显示元素的数量,几张图片 move:单击左右控制键时,移动的元素个数,此处为移动2张图片 prev_image:上一元素按钮图片 next_image:下一元素按钮图片 margin:图片之间的间隙,一般设为10px auto:自动滚动效果 controls:是否

通过JQuery实现win8一样酷炫的动态磁贴效果(示例代码)_jquery

我个人表示非常喜欢微软新一代的产品,先不管它产品的成熟与否,但是它带来的是全新的产品.所谓全新,是指在用户体验上,苹果这些年的成功使得所有产品都在模仿它的界面,包括安卓在内,不知道大家的感觉如何,反正我是对这些圆角矩形产生了审美疲劳(苹果以及安卓的粉丝勿喷,这里仅仅是从界面上评价,事实上从整体上来说,微软还是有差距的),当年wp的推出让我眼前一亮,马上喜欢上了Metro风格的产品,直至今天wp8以及win8开始越来越成熟. 写的不好,欢迎各位看官指正批评,不欢迎无故猛喷.大神请绕道. 废话少说,

jquery实现盒子下拉效果示例代码_jquery

复制代码 代码如下: <script src="js/Jquery1.7.js"></script> <script type="text/javascript"> $(function () { $('div:eq(1)').css({ 'margin-top': '-=100px' }); $('div:first').mouseover(function () { $('div:eq(1)').animate({'margi