巧用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解决移动页面上点击链接触发色块的问题
Jun 03 HTML / CSS
任意一块网页内容实现“活”的背景(目前火狐浏览器专有)
May 07 HTML / CSS
用CSS3绘制三角形的简单方法
Jul 17 HTML / CSS
深入理解css中vertical-align属性
Apr 18 HTML / CSS
HTML5 预加载让页面得以快速呈现
Aug 13 HTML / CSS
浅谈利用缓存来优化HTML5 Canvas程序的性能
May 12 HTML / CSS
浅析HTML5中header标签的用法
Jun 24 HTML / CSS
巧用HTML5给按钮背景设计不同的动画简单实例
Aug 09 HTML / CSS
canvas之自定义头像功能实现代码示例
Sep 29 HTML / CSS
利用三角函数在canvas上画虚线的方法
Jan 11 HTML / CSS
关于html选择框创建占位符的问题
Jun 09 HTML / CSS
使用canvas仿Echarts实现金字塔图的实例代码
Nov 11 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
漫威DC即将合作联动,而双方早已经秘密开始
2020/04/09 欧美动漫
六酷社区论坛HOME页清新格调免费版 下载
2007/03/07 PHP
discuz 首页四格:最新话题+最新回复+热门话题+精华文章插件
2007/08/19 PHP
destoon实现商铺管理主页设置增加新菜单的方法
2014/06/26 PHP
thinkphp学习笔记之多表查询
2014/07/28 PHP
php单链表实现代码分享
2016/07/04 PHP
thinkphp框架类库扩展操作示例
2019/11/26 PHP
PHP $O00OO0=urldecode &amp; eval 解密,记一次商业源码的去后门
2020/09/13 PHP
用JavaScript显示随机图像或引用
2009/04/21 Javascript
Js setInterval与setTimeout(定时执行与循环执行)的代码(可以传入参数)
2010/06/11 Javascript
js异步加载的三种解决方案
2013/03/04 Javascript
jQuery当鼠标悬停时放大图片的效果实例
2013/07/03 Javascript
jQuery操作cookie方法实例教程
2014/11/25 Javascript
JS实现至少包含字母、大小写数字、字符的密码等级的两种方法
2015/02/03 Javascript
kindeditor编辑器点中图片滚动条往上顶的bug
2015/07/05 Javascript
JQuery在循环中绑定事件的问题详解
2016/06/02 Javascript
AngularJS基础 ng-submit 指令简单示例
2016/08/03 Javascript
BootStrap glyphicon图标无法显示的解决方法
2016/09/06 Javascript
解析NodeJs的调试方法
2016/12/11 NodeJs
JS实现Ajax的方法分析
2016/12/20 Javascript
在node中如何使用 ES6
2017/04/22 Javascript
JavaScript伪数组用法实例分析
2017/12/22 Javascript
Javascript实现异步编程的过程
2018/06/18 Javascript
Vue中 key keep-alive的实现原理
2018/09/18 Javascript
vue2.0结合Element-ui实战案例
2019/03/06 Javascript
JS利用prototype给类添加方法操作详解
2019/06/21 Javascript
Vue分页器实现原理详解
2019/06/28 Javascript
JS函数进阶之继承用法实例分析
2020/01/15 Javascript
微信小程序实现简单购物车功能
2020/12/30 Javascript
python GUI库图形界面开发之PyQt5输入对话框QInputDialog详细使用方法与实例
2020/02/27 Python
python opencv实现图片缺陷检测(讲解直方图以及相关系数对比法)
2020/04/07 Python
俄罗斯三星品牌商店:GalaxyStore
2020/11/04 全球购物
美国小蜜蜂Burt’s Bees德国官网:天然唇部、皮肤和身体护理产品
2020/06/14 全球购物
小组合作学习反思
2014/02/18 职场文书
刑事附带民事上诉状
2015/05/23 职场文书
Springboot如何使用logback实现多环境配置?
2021/06/16 Java/Android