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


Posted in HTML / CSS onApril 09, 2012
复制代码
代码如下:

<!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.3water.com/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;
}

就这么简单....
HTML / CSS 相关文章推荐
css3实现波纹特效、H5实现动态波浪效果
Jan 31 HTML / CSS
纯CSS3实现给头像加个光芒四射且旋转的背景动画效果
May 07 HTML / CSS
CSS3中box-shadow的用法介绍
Jul 15 HTML / CSS
解决CSS3的opacity属性带来的层叠顺序问题
May 09 HTML / CSS
利用简洁的图片预加载组件提升html5移动页面的用户体验
Mar 11 HTML / CSS
让IE支持HTML5的方法
Dec 11 HTML / CSS
html5开发之viewport使用
Oct 17 HTML / CSS
详解HTML5中div和section以及article的区别
Jul 14 HTML / CSS
html5+css3进度条倒计时动画特效代码【推荐】
Mar 08 HTML / CSS
解析html5 canvas实现背景鼠标连线动态效果代码
Jun 17 HTML / CSS
HTML+CSS+JavaScript实现图片3D展览的示例代码
Oct 12 HTML / CSS
简单实现一个手持弹幕功能+文字抖动特效
Mar 31 HTML / CSS
时尚的CSS3进度条效果
Feb 22 #HTML / CSS
CSS3 选择器 伪类选择器介绍
Jan 21 #HTML / CSS
CSS3 选择器 属性选择器介绍
Jan 21 #HTML / CSS
CSS3 选择器 基本选择器介绍
Jan 21 #HTML / CSS
CSS3制作日历实现代码
Jan 21 #HTML / CSS
CSS3属性box-shadow使用详细教程
Jan 21 #HTML / CSS
45个非常奇妙的CSS3 特性应用示例
Jan 01 #HTML / CSS
You might like
php判断/计算闰年的方法小结【三种方法】
2019/07/06 PHP
php设计模式之策略模式实例分析【星际争霸游戏案例】
2020/03/26 PHP
javascript 极速 隐藏/显示万行表格列只需 60毫秒
2009/03/28 Javascript
动态的绑定事件addEventListener方法的使用
2014/01/24 Javascript
json属性名为什么要双引号(个人猜测)
2014/07/31 Javascript
a标签的href与onclick事件的区别详解
2014/11/12 Javascript
Jquery实现鼠标移动放大图片功能实例
2015/03/25 Javascript
jQuery插件Zclip实现完美兼容个浏览器点击复制内容到剪贴板
2015/04/30 Javascript
分享五个有用的jquery小技巧
2015/10/08 Javascript
jQuery检测滚动条是否到达底部
2015/12/15 Javascript
jquery 全选、全不选、反选效果的实现代码【推荐】
2016/05/05 Javascript
基于Vue如何封装分页组件
2016/12/16 Javascript
基于Vue 2.0 监听文本框内容变化及ref的使用说明介绍
2018/08/24 Javascript
使用p5.js临摹动态图形
2019/10/23 Javascript
详解Nuxt内导航栏的两种实现方式
2020/04/16 Javascript
详解JavaScript 异步编程
2020/07/13 Javascript
一文读懂vue动态属性数据绑定(v-bind指令)
2020/07/20 Javascript
python中将阿拉伯数字转换成中文的实现代码
2011/05/19 Python
十个Python练手的实战项目,学会这些Python就基本没问题了(推荐)
2019/04/26 Python
python的移位操作实现详解
2019/08/21 Python
opencv python图像梯度实例详解
2020/02/04 Python
postman和python mock测试过程图解
2020/02/22 Python
python os模块在系统管理中的应用
2020/06/22 Python
python 实现控制鼠标键盘
2020/11/27 Python
python生成word合同的实例方法
2021/01/12 Python
利用CSS3的transition属性实现滑动效果
2015/08/05 HTML / CSS
美国温暖商店:The Warming Store
2018/12/15 全球购物
公务员的自我鉴定
2013/10/26 职场文书
机械制造毕业生求职信
2014/03/03 职场文书
2015年十一国庆节演讲稿
2015/03/20 职场文书
收入证明申请书
2015/06/12 职场文书
2015年信息技术教研组工作总结
2015/07/22 职场文书
同学会演讲稿
2019/04/02 职场文书
详解MySQL 用户权限管理
2021/04/20 MySQL
nginx+lua单机上万并发的实现
2021/05/31 Servers
http通过StreamingHttpResponse完成连续的数据传输长链接方式
2022/02/12 Python