您的位置：首页 > Web前端 > CSS

巧用CSS3 border实现图片遮罩效果代码

2012-04-09 22:51 691 查看

<!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>无标题文档</title> 
<style type="text/css"> 
.trans { 
-webkit-transition: 0.3s ease; 
-moz-transition: 0.3s ease; 
-ms-transition: 0.3s ease; 
-o-transition: 0.3s ease; 
transition: 0.3s ease; 
} 
.test_outer { 
display: block; 
width: 200px; 
height: 200px; 
margin: 1em auto; 
position: relative; 
overflow: hidden; 
} 
.test_cover { 
width: 40px; 
height: 40px; 
border: 200px solid rgba(0, 0, 0, .35); 
border-radius: 50%; 
position: absolute; 
left: -115px; 
top: -165px; 
} 
.test_cover:hover { 
width: 140px; 
height: 140px; 
left: -170px; 
top: -165px; 
} 
.test_cover:hover:after { 
content: "秋思-一叶知秋！"; 
text-align:center; 
margin:55px 0 0 12px; 
color: #fff; 
font: bold 16px/1.2 '微软雅黑'; 
text-shadow: 1px 1px rgba(0, 0, 0, .35); 
position: absolute; 
} 
</style> 
</head> 
<body> 
<a href="#" class="test_outer"> 
<span class="test_cover trans"></span> 
<img src="http://img.jb51.net/data/avatar/000/00/64/47_avatar_middle.jpg" width="200" height="200" /> 
</a> 
</body> 
</html>

其实现原理是利用个border偌大的半透明边框属性（demo中边框宽度200像素），边框颜色为rgba黑色半透明，然后50%圆角。再用用定位把它覆盖在图片上面。
主要核心代码:

.test_cover { 
width: 40px; 
height: 40px; 
border: 200px solid rgba(0, 0, 0, .35); 
border-radius: 50%; 
position: absolute; 
left: -115px; 
top: -165px; 
}

然后外面再用个父容器把它溢出隐藏掉就可以了

.test_outer { 
display: block; 
width: 200px; 
height: 200px; 
margin: 1em auto; 
position: relative; 
overflow: hidden; 
}

就这么简单....

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航